diff --git a/.github/workflows/create-sync-pr.yml b/.github/workflows/create-sync-pr.yml
index d93aec13e..c8e27f322 100644
--- a/.github/workflows/create-sync-pr.yml
+++ b/.github/workflows/create-sync-pr.yml
@@ -2,7 +2,7 @@ name: Create PR in Plane EE Repository to sync the changes
 
 on:
   pull_request:
-    branches: 
+    branches:
       - master
     types:
       - closed
diff --git a/README.md b/README.md
index 79d1ef431..c00aee995 100644
--- a/README.md
+++ b/README.md
@@ -39,29 +39,33 @@ Meet [Plane](https://plane.so). An open-source software development tool to mana
 
 The easiest way to get started with Plane is by creating a [Plane Cloud](https://app.plane.so) account. Plane Cloud offers a hosted solution for Plane. If you prefer to self-host Plane, please refer to our [deployment documentation](https://docs.plane.so/self-hosting).
 
-## ⚡️ Contributors Quick Start 
+## ⚡️ Contributors Quick Start
 
 ### Prerequisite
+
 Development system must have docker engine installed and running.
 
+### Steps
 
-### Steps 
 Setting up local environment is extremely easy and straight forward. Follow the below step and you will be ready to contribute
 
 1. Clone the code locally using `git clone https://github.com/makeplane/plane.git`
 1. Switch to the code folder `cd plane`
 1. Create your feature or fix branch you plan to work on using `git checkout -b <feature-branch-name>`
 1. Open terminal and run `./setup.sh`
-1. Open the code on VSCode or similar equivalent IDE 
+1. Open the code on VSCode or similar equivalent IDE
 1. Review the `.env` files available in various folders. Visit [Environment Setup](./ENV_SETUP.md) to know about various environment variables used in system
 1. Run the docker command to initiate various services `docker compose -f docker-compose-local.yml up -d`
 
-You are ready to make changes to the code. Do not forget to refresh the browser (in case id does not auto-reload) 
+```bash
+./setup.sh
+```
 
-Thats it! 
+You are ready to make changes to the code. Do not forget to refresh the browser (in case id does not auto-reload)
 
+Thats it!
 
-## 🍙 Self Hosting 
+## 🍙 Self Hosting
 
 For self hosting environment setup, visit the [Self Hosting](https://docs.plane.so/self-hosting) documentation page
 
diff --git a/apiserver/plane/utils/issue_filters.py b/apiserver/plane/utils/issue_filters.py
index f3f180645..0b8f39e14 100644
--- a/apiserver/plane/utils/issue_filters.py
+++ b/apiserver/plane/utils/issue_filters.py
@@ -187,7 +187,6 @@ def filter_target_date(params, filter, method):
     if method == "GET":
         target_dates = params.get("target_date").split(",")
         if len(target_dates) and "" not in target_dates:
-
             date_filter(filter=filter, date_term="target_date", queries=target_dates)
     else:
         if params.get("target_date", None) and len(params.get("target_date")):
diff --git a/package.json b/package.json
index ba0fd9a61..2ed56291f 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
     "prettier": "latest",
     "prettier-plugin-tailwindcss": "^0.5.4",
     "tailwindcss": "^3.3.3",
-    "turbo": "latest"
+    "turbo": "^1.10.14"
   },
   "resolutions": {
     "@types/react": "18.2.0"
diff --git a/packages/editor/core/tsconfig.json b/packages/editor/core/tsconfig.json
index 61a60f324..57d0e9a74 100644
--- a/packages/editor/core/tsconfig.json
+++ b/packages/editor/core/tsconfig.json
@@ -1,12 +1,5 @@
 {
-  "extends": "tsconfig/react.json",
-  "include": [
-    "src/**/*",
-    "index.d.ts"
-  ],
-  "exclude": [
-    "dist",
-    "build",
-    "node_modules"
-  ]
+  "extends": "tsconfig/react-library.json",
+  "include": ["src/**/*", "index.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/packages/editor/lite-text-editor/tsconfig.json b/packages/editor/lite-text-editor/tsconfig.json
index 61a60f324..57d0e9a74 100644
--- a/packages/editor/lite-text-editor/tsconfig.json
+++ b/packages/editor/lite-text-editor/tsconfig.json
@@ -1,12 +1,5 @@
 {
-  "extends": "tsconfig/react.json",
-  "include": [
-    "src/**/*",
-    "index.d.ts"
-  ],
-  "exclude": [
-    "dist",
-    "build",
-    "node_modules"
-  ]
+  "extends": "tsconfig/react-library.json",
+  "include": ["src/**/*", "index.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/packages/editor/rich-text-editor/tsconfig.json b/packages/editor/rich-text-editor/tsconfig.json
index 61a60f324..57d0e9a74 100644
--- a/packages/editor/rich-text-editor/tsconfig.json
+++ b/packages/editor/rich-text-editor/tsconfig.json
@@ -1,12 +1,5 @@
 {
-  "extends": "tsconfig/react.json",
-  "include": [
-    "src/**/*",
-    "index.d.ts"
-  ],
-  "exclude": [
-    "dist",
-    "build",
-    "node_modules"
-  ]
+  "extends": "tsconfig/react-library.json",
+  "include": ["src/**/*", "index.d.ts"],
+  "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index dd2f9291b..810f5d70d 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -11,8 +11,9 @@ module.exports = {
       "./layouts/**/*.tsx",
       "./pages/**/*.tsx",
       "./ui/**/*.tsx",
-      "../packages/editor/**/*.{js,ts,jsx,tsx}"
-    ]
+      "../packages/ui/**/*.{js,ts,jsx,tsx}",
+      "../packages/editor/**/*.{js,ts,jsx,tsx}",
+    ],
   },
   theme: {
     extend: {
diff --git a/packages/tsconfig/react.json b/packages/tsconfig/react-library.json
similarity index 83%
rename from packages/tsconfig/react.json
rename to packages/tsconfig/react-library.json
index 36b62be38..211c87d8d 100644
--- a/packages/tsconfig/react.json
+++ b/packages/tsconfig/react-library.json
@@ -6,6 +6,7 @@
     "jsx": "react-jsx",
     "lib": ["ES2015", "DOM"],
     "module": "ESNext",
-    "target": "es6"
+    "target": "es6",
+    "sourceMap": true
   }
 }
diff --git a/packages/ui/button/index.tsx b/packages/ui/button/index.tsx
deleted file mode 100644
index 0a1550ec0..000000000
--- a/packages/ui/button/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export const Button = () => {
-  return <button>button</button>;
-};
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
deleted file mode 100644
index 677dc8f4d..000000000
--- a/packages/ui/index.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-// import * as React from "react";
-// components
-// export * from "./breadcrumbs";
-// export * from "./button";
-// export * from "./custom-listbox";
-// export * from "./custom-menu";
-// export * from "./custom-select";
-// export * from "./empty-space";
-// export * from "./header-button";
-// export * from "./input";
-// export * from "./loader";
-// export * from "./outline-button";
-// export * from "./select";
-// export * from "./spinner";
-// export * from "./text-area";
-// export * from "./tooltip";
-export * from "./button";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d107e711c..603d0e250 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,23 +1,40 @@
 {
-  "name": "ui",
-  "version": "0.13.2",
-  "main": "./index.tsx",
-  "types": "./index.tsx",
+  "name": "@plane/ui",
+  "version": "0.0.1",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
   "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
   "scripts": {
-    "lint": "eslint *.ts*"
+    "build": "tsup src/index.tsx --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "lint": "eslint src/",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "devDependencies": {
-    "@types/react": "^18.0.17",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.51.0",
+    "@types/node": "^20.5.2",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
     "classnames": "^2.3.2",
-    "eslint": "^7.32.0",
     "eslint-config-custom": "*",
-    "next": "12.3.2",
     "react": "^18.2.0",
     "tsconfig": "*",
     "tailwind-config-custom": "*",
+    "tsup": "^5.10.1",
     "typescript": "4.7.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@blueprintjs/core": "^4.16.3",
+    "@blueprintjs/popover2": "^1.13.3",
+    "@headlessui/react": "^1.7.17",
+    "clsx": "^2.0.0",
+    "next-themes": "^0.2.1"
   }
 }
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
new file mode 100644
index 000000000..706b0ae6c
--- /dev/null
+++ b/packages/ui/src/button/button.tsx
@@ -0,0 +1,66 @@
+import * as React from "react";
+
+import {
+  getIconStyling,
+  getButtonStyling,
+  TButtonVariant,
+  TButtonSizes,
+} from "./helper";
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: TButtonVariant;
+  size?: TButtonSizes;
+  className?: string;
+  loading?: boolean;
+  disabled?: boolean;
+  appendIcon?: any;
+  prependIcon?: any;
+  children: React.ReactNode;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const {
+      variant = "primary",
+      size = "md",
+      className = "",
+      type = "button",
+      loading = false,
+      disabled = false,
+      prependIcon = null,
+      appendIcon = null,
+      children,
+      ...rest
+    } = props;
+
+    const buttonStyle = getButtonStyling(variant, size, disabled || loading);
+    const buttonIconStyle = getIconStyling(size);
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        className={`${buttonStyle} ${className}`}
+        disabled={disabled || loading}
+        {...rest}
+      >
+        {prependIcon && (
+          <div className={buttonIconStyle}>
+            {React.cloneElement(prependIcon, { "stroke-width": 2 })}
+          </div>
+        )}
+        {children}
+        {appendIcon && (
+          <div className={buttonIconStyle}>
+            {React.cloneElement(appendIcon, { "stroke-width": 2 })}
+          </div>
+        )}
+      </button>
+    );
+  }
+);
+
+Button.displayName = "plane-ui-button";
+
+export { Button };
diff --git a/packages/ui/src/button/helper.tsx b/packages/ui/src/button/helper.tsx
new file mode 100644
index 000000000..82489c3e8
--- /dev/null
+++ b/packages/ui/src/button/helper.tsx
@@ -0,0 +1,123 @@
+export type TButtonVariant =
+  | "primary"
+  | "accent-primary"
+  | "outline-primary"
+  | "neutral-primary"
+  | "link-primary"
+  | "danger"
+  | "accent-danger"
+  | "outline-danger"
+  | "link-danger"
+  | "tertiary-danger";
+
+export type TButtonSizes = "sm" | "md" | "lg" | "xl";
+
+export interface IButtonStyling {
+  [key: string]: {
+    default: string;
+    hover: string;
+    pressed: string;
+    disabled: string;
+  };
+}
+
+enum buttonSizeStyling {
+  sm = `px-3 py-1.5 font-medium text-xs rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  md = `px-4 py-1.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  lg = `px-5 py-2 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+  xl = `px-5 py-3.5 font-medium text-sm rounded flex items-center gap-1.5 whitespace-nowrap transition-all justify-center inline`,
+}
+
+enum buttonIconStyling {
+  sm = "h-3 w-3 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  md = "h-3.5 w-3.5 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  lg = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+  xl = "h-4 w-4 flex justify-center items-center overflow-hidden my-0.5 flex-shrink-0",
+}
+
+export const buttonStyling: IButtonStyling = {
+  primary: {
+    default: `text-white bg-custom-primary-100`,
+    hover: `hover:bg-custom-primary-200`,
+    pressed: `focus:text-custom-brand-40 focus:bg-custom-primary-200`,
+    disabled: `cursor-not-allowed !bg-custom-primary-60 hover:bg-custom-primary-60`,
+  },
+  "accent-primary": {
+    default: `bg-custom-primary-10 text-custom-primary-100`,
+    hover: `hover:bg-custom-primary-20 hover:text-custom-primary-200`,
+    pressed: `focus:bg-custom-primary-20`,
+    disabled: `cursor-not-allowed !text-custom-primary-60`,
+  },
+  "outline-primary": {
+    default: `text-custom-primary-100 bg-custom-background-100 border border-custom-primary-100`,
+    hover: `hover:border-custom-primary-80 hover:bg-custom-primary-10`,
+    pressed: `focus:text-custom-primary-80 focus:bg-custom-primary-10 focus:border-custom-primary-80`,
+    disabled: `cursor-not-allowed !text-custom-primary-60 !border-custom-primary-60 `,
+  },
+  "neutral-primary": {
+    default: `text-custom-text-200 bg-custom-background-100 border border-custom-border-200`,
+    hover: `hover:bg-custom-background-90`,
+    pressed: `focus:text-custom-text-300 focus:bg-custom-background-90`,
+    disabled: `cursor-not-allowed !text-custom-text-400`,
+  },
+  "link-primary": {
+    default: `text-custom-primary-100 bg-custom-background-100`,
+    hover: `hover:text-custom-primary-200`,
+    pressed: `focus:text-custom-primary-80 `,
+    disabled: `cursor-not-allowed !text-custom-primary-60`,
+  },
+
+  danger: {
+    default: `text-white bg-red-500`,
+    hover: ` hover:bg-red-600`,
+    pressed: `focus:text-red-200 focus:bg-red-600`,
+    disabled: `cursor-not-allowed !bg-red-300`,
+  },
+  "accent-danger": {
+    default: `text-red-500 bg-red-50`,
+    hover: `hover:text-red-600 hover:bg-red-100`,
+    pressed: `focus:text-red-500 focus:bg-red-100`,
+    disabled: `cursor-not-allowed !text-red-300`,
+  },
+  "outline-danger": {
+    default: `text-red-500 bg-custom-background-100 border border-red-500`,
+    hover: `hover:text-red-400 hover:border-red-400`,
+    pressed: `focus:text-red-400 focus:border-red-400`,
+    disabled: `cursor-not-allowed !text-red-300 !border-red-300`,
+  },
+  "link-danger": {
+    default: `text-red-500 bg-custom-background-100`,
+    hover: `hover:text-red-400`,
+    pressed: `focus:text-red-400`,
+    disabled: `cursor-not-allowed !text-red-300`,
+  },
+  "tertiary-danger": {
+    default: `text-red-500 bg-custom-background-100 border border-red-200`,
+    hover: `hover:bg-red-50 hover:border-red-300`,
+    pressed: `focus:text-red-400`,
+    disabled: `cursor-not-allowed !text-red-300`,
+  },
+};
+
+export const getButtonStyling = (
+  variant: TButtonVariant,
+  size: TButtonSizes,
+  disabled: boolean = false
+): string => {
+  let _variant: string = ``;
+  const currentVariant = buttonStyling[variant];
+
+  _variant = `${currentVariant.default} ${
+    disabled ? currentVariant.disabled : currentVariant.hover
+  } ${currentVariant.pressed}`;
+
+  let _size: string = ``;
+  if (size) _size = buttonSizeStyling[size];
+  return `${_variant} ${_size}`;
+};
+
+export const getIconStyling = (size: TButtonSizes): string => {
+  let icon: string = ``;
+  if (size) icon = buttonIconStyling[size];
+  return icon;
+};
diff --git a/packages/ui/src/button/index.tsx b/packages/ui/src/button/index.tsx
new file mode 100644
index 000000000..f1a2d03d4
--- /dev/null
+++ b/packages/ui/src/button/index.tsx
@@ -0,0 +1,2 @@
+export * from "./button";
+export * from "./toggle-switch";
diff --git a/packages/ui/src/button/toggle-switch.tsx b/packages/ui/src/button/toggle-switch.tsx
new file mode 100644
index 000000000..9888dd205
--- /dev/null
+++ b/packages/ui/src/button/toggle-switch.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+
+import { Switch } from "@headlessui/react";
+
+interface IToggleSwitchProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  disabled?: boolean;
+  className?: string;
+}
+
+const ToggleSwitch: React.FC<IToggleSwitchProps> = (props) => {
+  const { value, onChange, label, size = "sm", disabled, className } = props;
+
+  return (
+    <Switch
+      checked={value}
+      disabled={disabled}
+      onChange={onChange}
+      className={`relative flex-shrink-0 inline-flex ${
+        size === "sm" ? "h-4 w-6" : size === "md" ? "h-5 w-8" : "h-6 w-10"
+      } flex-shrink-0 cursor-pointer rounded-full border border-custom-border-200 transition-colors duration-200 ease-in-out focus:outline-none ${
+        value ? "bg-custom-primary-100" : "bg-gray-700"
+      } ${className || ""} ${disabled ? "cursor-not-allowed" : ""}`}
+    >
+      <span className="sr-only">{label}</span>
+      <span
+        aria-hidden="true"
+        className={`self-center inline-block ${
+          size === "sm" ? "h-2 w-2" : size === "md" ? "h-3 w-3" : "h-4 w-4"
+        } transform rounded-full shadow ring-0 transition duration-200 ease-in-out ${
+          value
+            ? (size === "sm"
+                ? "translate-x-3"
+                : size === "md"
+                ? "translate-x-4"
+                : "translate-x-5") + " bg-white"
+            : "translate-x-0.5 bg-custom-background-90"
+        } ${disabled ? "cursor-not-allowed" : ""}`}
+      />
+    </Switch>
+  );
+};
+
+ToggleSwitch.displayName = "plane-ui-toggle-switch";
+
+export { ToggleSwitch };
diff --git a/packages/ui/src/form-fields/index.tsx b/packages/ui/src/form-fields/index.tsx
new file mode 100644
index 000000000..01cd4edea
--- /dev/null
+++ b/packages/ui/src/form-fields/index.tsx
@@ -0,0 +1,2 @@
+export * from "./input";
+export * from "./textarea";
diff --git a/packages/ui/src/form-fields/input.tsx b/packages/ui/src/form-fields/input.tsx
new file mode 100644
index 000000000..648b78aa7
--- /dev/null
+++ b/packages/ui/src/form-fields/input.tsx
@@ -0,0 +1,49 @@
+import * as React from "react";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  mode?: "primary" | "transparent" | "true-transparent";
+  inputSize?: "sm" | "md";
+  hasError?: boolean;
+  className?: string;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
+  const {
+    id,
+    type,
+    name,
+    mode = "primary",
+    inputSize = "sm",
+    hasError = false,
+    className = "",
+    ...rest
+  } = props;
+
+  return (
+    <input
+      id={id}
+      ref={ref}
+      type={type}
+      name={name}
+      className={`block rounded-md bg-transparent text-sm focus:outline-none placeholder-custom-text-400 ${
+        mode === "primary"
+          ? "rounded-md border border-custom-border-200"
+          : mode === "transparent"
+          ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-custom-primary"
+          : mode === "true-transparent"
+          ? "rounded border-none bg-transparent ring-0"
+          : ""
+      } ${hasError ? "border-red-500" : ""} ${
+        hasError && mode === "primary" ? "bg-red-500/20" : ""
+      } ${
+        inputSize === "sm" ? "px-3 py-2" : inputSize === "md" ? "p-3" : ""
+      } ${className}`}
+      {...rest}
+    />
+  );
+});
+
+Input.displayName = "form-input-field";
+
+export { Input };
diff --git a/packages/ui/src/form-fields/textarea.tsx b/packages/ui/src/form-fields/textarea.tsx
new file mode 100644
index 000000000..93a850059
--- /dev/null
+++ b/packages/ui/src/form-fields/textarea.tsx
@@ -0,0 +1,69 @@
+import * as React from "react";
+
+export interface TextAreaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  mode?: "primary" | "transparent";
+  hasError?: boolean;
+  className?: string;
+}
+
+// Updates the height of a <textarea> when the value changes.
+const useAutoSizeTextArea = (
+  textAreaRef: HTMLTextAreaElement | null,
+  value: any
+) => {
+  React.useEffect(() => {
+    if (textAreaRef) {
+      // We need to reset the height momentarily to get the correct scrollHeight for the textarea
+      textAreaRef.style.height = "0px";
+      const scrollHeight = textAreaRef.scrollHeight;
+
+      // We then set the height directly, outside of the render loop
+      // Trying to set this with state or a ref will product an incorrect value.
+      textAreaRef.style.height = scrollHeight + "px";
+    }
+  }, [textAreaRef, value]);
+};
+
+const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (props, ref) => {
+    const {
+      id,
+      name,
+      value = "",
+      rows = 1,
+      cols = 1,
+      mode = "primary",
+      hasError = false,
+      className = "",
+      ...rest
+    } = props;
+
+    const textAreaRef = React.useRef<any>(ref);
+
+    ref && useAutoSizeTextArea(textAreaRef?.current, value);
+
+    return (
+      <textarea
+        id={id}
+        name={name}
+        ref={textAreaRef}
+        value={value}
+        rows={rows}
+        cols={cols}
+        className={`no-scrollbar w-full bg-transparent placeholder-custom-text-400 px-3 py-2 outline-none ${
+          mode === "primary"
+            ? "rounded-md border border-custom-border-200"
+            : mode === "transparent"
+            ? "rounded border-none bg-transparent ring-0 transition-all focus:ring-1 focus:ring-theme"
+            : ""
+        } ${hasError ? "border-red-500" : ""} ${
+          hasError && mode === "primary" ? "bg-red-100" : ""
+        } ${className}`}
+        {...rest}
+      />
+    );
+  }
+);
+
+export { TextArea };
diff --git a/packages/ui/src/index.tsx b/packages/ui/src/index.tsx
new file mode 100644
index 000000000..1cff8eeac
--- /dev/null
+++ b/packages/ui/src/index.tsx
@@ -0,0 +1,6 @@
+export * from "./button";
+export * from "./form-fields";
+export * from "./progress";
+export * from "./spinners";
+export * from "./loader";
+export * from "./tooltip";
diff --git a/packages/ui/src/loader.tsx b/packages/ui/src/loader.tsx
new file mode 100644
index 000000000..cd12bc22f
--- /dev/null
+++ b/packages/ui/src/loader.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+const Loader = ({ children, className = "" }: Props) => (
+  <div className={`${className} animate-pulse`} role="status">
+    {children}
+  </div>
+);
+
+type ItemProps = {
+  height?: string;
+  width?: string;
+};
+
+const Item: React.FC<ItemProps> = ({ height = "auto", width = "auto" }) => (
+  <div
+    className="rounded-md bg-custom-background-80"
+    style={{ height: height, width: width }}
+  />
+);
+
+Loader.Item = Item;
+
+Loader.displayName = "plane-ui-loader";
+
+export { Loader };
diff --git a/packages/ui/src/progress/index.tsx b/packages/ui/src/progress/index.tsx
new file mode 100644
index 000000000..ad5a371c1
--- /dev/null
+++ b/packages/ui/src/progress/index.tsx
@@ -0,0 +1,3 @@
+export * from "./radial-progress";
+export * from "./progress-bar";
+export * from "./linear-progress-indicator";
diff --git a/packages/ui/src/progress/linear-progress-indicator.tsx b/packages/ui/src/progress/linear-progress-indicator.tsx
new file mode 100644
index 000000000..9fc115f9f
--- /dev/null
+++ b/packages/ui/src/progress/linear-progress-indicator.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { Tooltip } from "../tooltip";
+
+type Props = {
+  data: any;
+  noTooltip?: boolean;
+};
+
+export const LinearProgressIndicator: React.FC<Props> = ({
+  data,
+  noTooltip = false,
+}) => {
+  const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
+  let progress = 0;
+
+  const bars = data.map((item: any) => {
+    const width = `${(item.value / total) * 100}%`;
+    const style = {
+      width,
+      backgroundColor: item.color,
+    };
+    progress += item.value;
+    if (noTooltip) return <div style={style} />;
+    else
+      return (
+        <Tooltip
+          key={item.id}
+          tooltipContent={`${item.name} ${Math.round(item.value)}%`}
+        >
+          <div style={style} />
+        </Tooltip>
+      );
+  });
+
+  return (
+    <div className="flex h-1 w-full items-center justify-between gap-1">
+      {total === 0 ? (
+        <div className="flex h-full w-full gap-1 bg-neutral-500">{bars}</div>
+      ) : (
+        <div className="flex h-full w-full gap-1">{bars}</div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/ui/src/progress/progress-bar.tsx b/packages/ui/src/progress/progress-bar.tsx
new file mode 100644
index 000000000..d241e3d5e
--- /dev/null
+++ b/packages/ui/src/progress/progress-bar.tsx
@@ -0,0 +1,77 @@
+import React from "react";
+
+type Props = {
+  maxValue?: number;
+  value?: number;
+  radius?: number;
+  strokeWidth?: number;
+  activeStrokeColor?: string;
+  inactiveStrokeColor?: string;
+};
+
+export const ProgressBar: React.FC<Props> = ({
+  maxValue = 0,
+  value = 0,
+  radius = 8,
+  strokeWidth = 2,
+  activeStrokeColor = "#3e98c7",
+  inactiveStrokeColor = "#ddd",
+}) => {
+  // PIE Calc Fn
+  const generatePie = (value: any) => {
+    const x = radius - Math.cos((2 * Math.PI) / (100 / value)) * radius;
+    const y = radius + Math.sin((2 * Math.PI) / (100 / value)) * radius;
+    const long = value <= 50 ? 0 : 1;
+    const d = `M${radius} ${radius} L${radius} ${0} A${radius} ${radius} 0 ${long} 1 ${y} ${x} Z`;
+
+    return d;
+  };
+
+  // ----  PIE Area Calc  --------
+  const calculatePieValue = (numberOfBars: any) => {
+    const angle = 360 / numberOfBars;
+    const pieValue = Math.floor(angle / 4);
+    return pieValue < 1 ? 1 : Math.floor(angle / 4);
+  };
+
+  // ----  PIE Render Fn --------
+  const renderPie = (i: any) => {
+    const DIRECTION = -1;
+    // Rotation Calc
+    const primaryRotationAngle = (maxValue - 1) * (360 / maxValue);
+    const rotationAngle =
+      -1 * DIRECTION * primaryRotationAngle +
+      i * DIRECTION * primaryRotationAngle;
+    const rotationTransformation = `rotate(${rotationAngle}, ${radius}, ${radius})`;
+    const pieValue = calculatePieValue(maxValue);
+    const dValue = generatePie(pieValue);
+    const fillColor =
+      value > 0 && i <= value ? activeStrokeColor : inactiveStrokeColor;
+
+    return (
+      <path
+        style={{ opacity: i === 0 ? 0 : 1 }}
+        key={i}
+        d={dValue}
+        fill={fillColor}
+        transform={rotationTransformation}
+      />
+    );
+  };
+
+  // combining the Pies
+  const renderOuterCircle = () =>
+    [...Array(maxValue + 1)].map((e, i) => renderPie(i));
+
+  return (
+    <svg width={radius * 2} height={radius * 2}>
+      {renderOuterCircle()}
+      <circle
+        r={radius - strokeWidth}
+        cx={radius}
+        cy={radius}
+        className="progress-bar"
+      />
+    </svg>
+  );
+};
diff --git a/packages/ui/src/progress/radial-progress.tsx b/packages/ui/src/progress/radial-progress.tsx
new file mode 100644
index 000000000..54afa7df3
--- /dev/null
+++ b/packages/ui/src/progress/radial-progress.tsx
@@ -0,0 +1,45 @@
+import React, { useState, useEffect, FC } from "react";
+
+interface IRadialProgressBar {
+  progress: number;
+}
+
+export const RadialProgressBar: FC<IRadialProgressBar> = (props) => {
+  const { progress } = props;
+  const [circumference, setCircumference] = useState(0);
+
+  useEffect(() => {
+    const radius = 40;
+    const circumference = 2 * Math.PI * radius;
+    setCircumference(circumference);
+  }, []);
+
+  const progressOffset = ((100 - progress) / 100) * circumference;
+
+  return (
+    <div className="relative h-4 w-4">
+      <svg className="absolute top-0 left-0" viewBox="0 0 100 100">
+        <circle
+          className={"stroke-current opacity-10"}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+        />
+        <circle
+          className={`stroke-current`}
+          cx="50"
+          cy="50"
+          r="40"
+          strokeWidth="12"
+          fill="none"
+          strokeDasharray={`${circumference} ${circumference}`}
+          strokeDashoffset={progressOffset}
+          transform="rotate(-90 50 50)"
+        />
+      </svg>
+    </div>
+  );
+};
diff --git a/packages/ui/src/spinners/circular-spinner.tsx b/packages/ui/src/spinners/circular-spinner.tsx
new file mode 100644
index 000000000..b96188030
--- /dev/null
+++ b/packages/ui/src/spinners/circular-spinner.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export const Spinner: React.FC = () => (
+  <div role="status">
+    <svg
+      aria-hidden="true"
+      className="mr-2 h-8 w-8 animate-spin fill-blue-600 text-custom-text-200"
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+    <span className="sr-only">Loading...</span>
+  </div>
+);
diff --git a/packages/ui/src/spinners/index.ts b/packages/ui/src/spinners/index.ts
new file mode 100644
index 000000000..768568172
--- /dev/null
+++ b/packages/ui/src/spinners/index.ts
@@ -0,0 +1 @@
+export * from "./circular-spinner";
diff --git a/packages/ui/src/tooltip/index.tsx b/packages/ui/src/tooltip/index.tsx
new file mode 100644
index 000000000..3c61782ae
--- /dev/null
+++ b/packages/ui/src/tooltip/index.tsx
@@ -0,0 +1 @@
+export * from "./tooltip";
diff --git a/packages/ui/src/tooltip/tooltip.tsx b/packages/ui/src/tooltip/tooltip.tsx
new file mode 100644
index 000000000..ca25cd3e1
--- /dev/null
+++ b/packages/ui/src/tooltip/tooltip.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+
+// next-themes
+import { useTheme } from "next-themes";
+import { Tooltip2 } from "@blueprintjs/popover2";
+
+export type TPosition =
+  | "top"
+  | "right"
+  | "bottom"
+  | "left"
+  | "auto"
+  | "auto-end"
+  | "auto-start"
+  | "bottom-left"
+  | "bottom-right"
+  | "left-bottom"
+  | "left-top"
+  | "right-bottom"
+  | "right-top"
+  | "top-left"
+  | "top-right";
+
+interface ITooltipProps {
+  tooltipHeading?: string;
+  tooltipContent: string | React.ReactNode;
+  position?: TPosition;
+  children: JSX.Element;
+  disabled?: boolean;
+  className?: string;
+  openDelay?: number;
+  closeDelay?: number;
+}
+
+export const Tooltip: React.FC<ITooltipProps> = ({
+  tooltipHeading,
+  tooltipContent,
+  position = "top",
+  children,
+  disabled = false,
+  className = "",
+  openDelay = 200,
+  closeDelay,
+}) => {
+  const { theme } = useTheme();
+
+  return (
+    <Tooltip2
+      disabled={disabled}
+      hoverOpenDelay={openDelay}
+      hoverCloseDelay={closeDelay}
+      content={
+        <div
+          className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
+            theme === "custom"
+              ? "bg-custom-background-100 text-custom-text-200"
+              : "bg-black text-gray-400"
+          } break-words overflow-hidden ${className}`}
+        >
+          {tooltipHeading && (
+            <h5
+              className={`font-medium ${
+                theme === "custom" ? "text-custom-text-100" : "text-white"
+              }`}
+            >
+              {tooltipHeading}
+            </h5>
+          )}
+          {tooltipContent}
+        </div>
+      }
+      position={position}
+      renderTarget={({
+        isOpen: isTooltipOpen,
+        ref: eleReference,
+        ...tooltipProps
+      }) =>
+        React.cloneElement(children, {
+          ref: eleReference,
+          ...tooltipProps,
+          ...children.props,
+        })
+      }
+    />
+  );
+};
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index cd6c94d6e..08a82e907 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,5 +1,8 @@
 {
   "extends": "tsconfig/react-library.json",
+  "compilerOptions": {
+    "jsx": "react"
+  },
   "include": ["."],
   "exclude": ["dist", "build", "node_modules"]
 }
diff --git a/space/components/accounts/email-reset-password-form.tsx b/space/components/accounts/email-reset-password-form.tsx
index c850b305c..ee71890ec 100644
--- a/space/components/accounts/email-reset-password-form.tsx
+++ b/space/components/accounts/email-reset-password-form.tsx
@@ -7,7 +7,8 @@ import userService from "services/user.service";
 // hooks
 // import useToast from "hooks/use-toast";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Input } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 type Props = {
   setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
@@ -77,12 +78,12 @@ export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword
         {errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
       </div>
       <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
-        <SecondaryButton className="w-full text-center h-[46px]" onClick={() => setIsResettingPassword(false)}>
+        <Button variant="neutral-primary" className="w-full" onClick={() => setIsResettingPassword(false)}>
           Go Back
-        </SecondaryButton>
-        <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
+        </Button>
+        <Button variant="primary" className="w-full" type="submit" loading={isSubmitting}>
           {isSubmitting ? "Sending link..." : "Send reset link"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/turbo.json b/turbo.json
index 4b64d6231..62afa90bb 100644
--- a/turbo.json
+++ b/turbo.json
@@ -3,9 +3,7 @@
   "globalEnv": [
     "NEXT_PUBLIC_API_BASE_URL",
     "NEXT_PUBLIC_DEPLOY_URL",
-    "API_BASE_URL",
     "NEXT_PUBLIC_SENTRY_DSN",
-    "SENTRY_AUTH_TOKEN",
     "NEXT_PUBLIC_SENTRY_ENVIRONMENT",
     "NEXT_PUBLIC_GITHUB_APP_NAME",
     "NEXT_PUBLIC_ENABLE_SENTRY",
@@ -28,20 +26,16 @@
   ],
   "pipeline": {
     "build": {
-      "dependsOn": [
-        "^build"
-      ],
-      "outputs": [
-        ".next/**",
-        "dist/**"
-      ]
+      "dependsOn": ["^build"],
+      "outputs": [".next/**", "dist/**"]
     },
     "web#develop": {
       "cache": false,
       "persistent": true,
       "dependsOn": [
         "@plane/lite-text-editor#build",
-        "@plane/rich-text-editor#build"
+        "@plane/rich-text-editor#build",
+        "@plane/ui#build"
       ]
     },
     "space#develop": {
@@ -49,39 +43,36 @@
       "persistent": true,
       "dependsOn": [
         "@plane/lite-text-editor#build",
-        "@plane/rich-text-editor#build"
+        "@plane/rich-text-editor#build",
+        "@plane/ui#build"
       ]
     },
     "web#build": {
       "cache": true,
       "dependsOn": [
         "@plane/lite-text-editor#build",
-        "@plane/rich-text-editor#build"
+        "@plane/rich-text-editor#build",
+        "@plane/ui#build"
       ]
     },
     "space#build": {
       "cache": true,
       "dependsOn": [
         "@plane/lite-text-editor#build",
-        "@plane/rich-text-editor#build"
+        "@plane/rich-text-editor#build",
+        "@plane/ui#build"
       ]
     },
     "@plane/lite-text-editor#build": {
       "cache": true,
-      "dependsOn": [
-        "@plane/editor-core#build"
-      ]
+      "dependsOn": ["@plane/editor-core#build"]
     },
     "@plane/rich-text-editor#build": {
       "cache": true,
-      "dependsOn": [
-        "@plane/editor-core#build"
-      ]
+      "dependsOn": ["@plane/editor-core#build"]
     },
     "test": {
-      "dependsOn": [
-        "^build"
-      ],
+      "dependsOn": ["^build"],
       "outputs": []
     },
     "lint": {
diff --git a/web/.prettierrc b/web/.prettierrc
index d5cb26e54..87d988f1b 100644
--- a/web/.prettierrc
+++ b/web/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "printWidth": 100,
+  "printWidth": 120,
   "tabWidth": 2,
   "trailingComma": "es5"
 }
diff --git a/web/components/account/email-code-form.tsx b/web/components/account/email-code-form.tsx
index 1e68cbb29..bb7dbe13b 100644
--- a/web/components/account/email-code-form.tsx
+++ b/web/components/account/email-code-form.tsx
@@ -1,13 +1,12 @@
 import React, { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // ui
-import { CheckCircleIcon } from "@heroicons/react/20/solid";
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // services
-import authenticationService from "services/authentication.service";
+import { AuthService } from "services/auth.service";
+// hooks
 import useToast from "hooks/use-toast";
 import useTimer from "hooks/use-timer";
-// icons
 
 // types
 type EmailCodeFormValues = {
@@ -16,6 +15,8 @@ type EmailCodeFormValues = {
   token?: string;
 };
 
+const authService = new AuthService();
+
 export const EmailCodeForm = ({ handleSignIn }: any) => {
   const [codeSent, setCodeSent] = useState(false);
   const [codeResent, setCodeResent] = useState(false);
@@ -27,8 +28,8 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
   const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
 
   const {
-    register,
     handleSubmit,
+    control,
     setError,
     setValue,
     getValues,
@@ -44,12 +45,11 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
     reValidateMode: "onChange",
   });
 
-  const isResendDisabled =
-    resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
+  const isResendDisabled = resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
 
   const onSubmit = async ({ email }: EmailCodeFormValues) => {
     setErrorResendingCode(false);
-    await authenticationService
+    await authService
       .emailCode({ email })
       .then((res) => {
         setValue("key", res.key);
@@ -67,7 +67,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
 
   const handleSignin = async (formData: EmailCodeFormValues) => {
     setIsLoading(true);
-    await authenticationService
+    await authService
       .magicSignIn(formData)
       .then((response) => {
         handleSignIn(response);
@@ -109,6 +109,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
     return () => {
       window.removeEventListener("keydown", submitForm);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [handleSubmit, codeSent]);
 
   return (
@@ -122,44 +123,58 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
       )}
       <form className="space-y-4 mt-10 sm:w-[360px] mx-auto">
         <div className="space-y-1">
-          <Input
-            id="email"
-            type="email"
+          <Controller
+            control={control}
             name="email"
-            register={register}
-            validations={{
+            rules={{
               required: "Email address is required",
               validate: (value) =>
                 /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                   value
                 ) || "Email address is not valid",
             }}
-            error={errors.email}
-            placeholder="Enter your email address..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.email)}
+                placeholder="Enter your email address..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
           />
         </div>
 
         {codeSent && (
           <>
-            <Input
-              id="token"
-              type="token"
+            <Controller
+              control={control}
               name="token"
-              register={register}
-              validations={{
+              rules={{
                 required: "Code is required",
               }}
-              error={errors.token}
-              placeholder="Enter code..."
-              className="border-custom-border-300 h-[46px]"
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="token"
+                  name="token"
+                  type="token"
+                  value={value ?? ""}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.token)}
+                  placeholder="Enter code..."
+                  className="border-custom-border-300 h-[46px] w-full"
+                />
+              )}
             />
             <button
               type="button"
               className={`flex w-full justify-end text-xs outline-none ${
-                isResendDisabled
-                  ? "cursor-default text-custom-text-200"
-                  : "cursor-pointer text-custom-primary-100"
+                isResendDisabled ? "cursor-default text-custom-text-200" : "cursor-pointer text-custom-primary-100"
               } `}
               onClick={() => {
                 setIsCodeResending(true);
@@ -184,20 +199,22 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
           </>
         )}
         {codeSent ? (
-          <PrimaryButton
+          <Button
+            variant="primary"
             type="submit"
-            className="w-full text-center h-[46px]"
+            className="w-full"
             size="md"
             onClick={handleSubmit(handleSignin)}
             disabled={!isValid && isDirty}
             loading={isLoading}
           >
             {isLoading ? "Signing in..." : "Sign in"}
-          </PrimaryButton>
+          </Button>
         ) : (
-          <PrimaryButton
-            className="w-full text-center h-[46px]"
-            size="md"
+          <Button
+            variant="primary"
+            className="w-full"
+            size="xl"
             onClick={() => {
               handleSubmit(onSubmit)().then(() => {
                 setResendCodeTimer(30);
@@ -207,7 +224,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
             loading={isSubmitting}
           >
             {isSubmitting ? "Sending code..." : "Send sign in code"}
-          </PrimaryButton>
+          </Button>
         )}
       </form>
     </>
diff --git a/web/components/account/email-forgot-password-form.tsx b/web/components/account/email-forgot-password-form.tsx
new file mode 100644
index 000000000..684589ca6
--- /dev/null
+++ b/web/components/account/email-forgot-password-form.tsx
@@ -0,0 +1,69 @@
+import { FC } from "react";
+import { useRouter } from "next/router";
+import { useForm, Controller } from "react-hook-form";
+// ui
+import { Input, Button } from "@plane/ui";
+
+export interface EmailForgotPasswordFormValues {
+  email: string;
+}
+
+export interface IEmailForgotPasswordForm {
+  onSubmit: (formValues: any) => Promise<void>;
+}
+
+export const EmailForgotPasswordForm: FC<IEmailForgotPasswordForm> = (props) => {
+  const { onSubmit } = props;
+  // router
+  const router = useRouter();
+  // form data
+  const {
+    control,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<EmailForgotPasswordFormValues>({
+    defaultValues: {
+      email: "",
+    },
+    mode: "onChange",
+    reValidateMode: "onChange",
+  });
+
+  return (
+    <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
+      <div className="space-y-1">
+        <Controller
+          control={control}
+          name="email"
+          rules={{
+            required: "Email address is required",
+            validate: (value) =>
+              /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
+                value
+              ) || "Email address is not valid",
+          }}
+          render={({ field: { value, onChange } }) => (
+            <Input
+              id="email"
+              type="email"
+              name="email"
+              value={value}
+              onChange={onChange}
+              hasError={Boolean(errors.email)}
+              placeholder="Enter registered email address.."
+              className="border-custom-border-300 h-[46px]"
+            />
+          )}
+        />
+      </div>
+      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
+        <Button className="w-full text-center h-[46px]" onClick={() => router.push("/")}>
+          Go Back
+        </Button>
+        <Button type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
+          {isSubmitting ? "Sending link..." : "Send reset link"}
+        </Button>
+      </div>
+    </form>
+  );
+};
diff --git a/web/components/account/email-password-form.tsx b/web/components/account/email-password-form.tsx
index 7a95095ee..7632a67c2 100644
--- a/web/components/account/email-password-form.tsx
+++ b/web/components/account/email-password-form.tsx
@@ -1,24 +1,26 @@
 import React from "react";
-import { useForm } from "react-hook-form";
+import { useForm, Controller } from "react-hook-form";
+import { useRouter } from "next/router";
 // ui
-import { Input, PrimaryButton } from "components/ui";
-// types
-type EmailPasswordFormValues = {
+import { Input, Button } from "@plane/ui";
+
+export interface EmailPasswordFormValues {
   email: string;
   password?: string;
   medium?: string;
-};
+}
 
-type Props = {
+export interface IEmailPasswordForm {
   onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
-  setIsResettingPassword: (value: boolean) => void;
-};
+}
 
-export const EmailPasswordForm: React.FC<Props> = (props) => {
-  const { onSubmit, setIsResettingPassword } = props;
+export const EmailPasswordForm: React.FC<IEmailPasswordForm> = (props) => {
+  const { onSubmit } = props;
+  // router
+  const router = useRouter();
   // form info
   const {
-    register,
+    control,
     handleSubmit,
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<EmailPasswordFormValues>({
@@ -33,60 +35,80 @@ export const EmailPasswordForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <form
-        className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-        onSubmit={handleSubmit(onSubmit)}
-      >
+      <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
         <div className="space-y-1">
-          <Input
-            id="email"
-            type="email"
+          <Controller
+            control={control}
             name="email"
-            register={register}
-            validations={{
+            rules={{
               required: "Email address is required",
               validate: (value) =>
                 /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                   value
                 ) || "Email address is not valid",
             }}
-            error={errors.email}
-            placeholder="Enter your email address..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange } }) => (
+              <Input
+                id="email"
+                type="email"
+                name="email"
+                value={value}
+                onChange={onChange}
+                hasError={Boolean(errors.email)}
+                placeholder="Enter your email address..."
+                className="border-custom-border-300 h-[46px]"
+              />
+            )}
           />
         </div>
         <div className="space-y-1">
-          <Input
-            id="password"
-            type="password"
+          <Controller
+            control={control}
             name="password"
-            register={register}
-            validations={{
+            rules={{
               required: "Password is required",
             }}
-            error={errors.password}
-            placeholder="Enter your password..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange } }) => (
+              <Input
+                id="password"
+                type="password"
+                name="password"
+                value={value}
+                onChange={onChange}
+                hasError={Boolean(errors.password)}
+                placeholder="Enter your password..."
+                className="border-custom-border-300 h-[46px]"
+              />
+            )}
           />
         </div>
         <div className="text-right text-xs">
           <button
             type="button"
-            onClick={() => setIsResettingPassword(true)}
+            onClick={() => router.push("/accounts/forgot-password")}
             className="text-custom-text-200 hover:text-custom-primary-100"
           >
             Forgot your password?
           </button>
         </div>
         <div>
-          <PrimaryButton
+          <Button
             type="submit"
             className="w-full text-center h-[46px]"
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >
             {isSubmitting ? "Signing in..." : "Sign in"}
-          </PrimaryButton>
+          </Button>
+        </div>
+        <div className="text-xs">
+          <button
+            type="button"
+            onClick={() => router.push("/accounts/sign-up")}
+            className="text-custom-text-200 hover:text-custom-primary-100"
+          >
+            {"Don't have an account? Sign Up"}
+          </button>
         </div>
       </form>
     </>
diff --git a/web/components/account/email-reset-password-form.tsx b/web/components/account/email-reset-password-form.tsx
deleted file mode 100644
index 3717e8801..000000000
--- a/web/components/account/email-reset-password-form.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from "react";
-
-// react hook form
-import { useForm } from "react-hook-form";
-// services
-import userService from "services/user.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
-// types
-type Props = {
-  setIsResettingPassword: React.Dispatch<React.SetStateAction<boolean>>;
-};
-
-export const EmailResetPasswordForm: React.FC<Props> = ({ setIsResettingPassword }) => {
-  const { setToastAlert } = useToast();
-
-  const {
-    register,
-    handleSubmit,
-    formState: { errors, isSubmitting },
-  } = useForm({
-    defaultValues: {
-      email: "",
-    },
-    mode: "onChange",
-    reValidateMode: "onChange",
-  });
-
-  const forgotPassword = async (formData: any) => {
-    const payload = {
-      email: formData.email,
-    };
-
-    await userService
-      .forgotPassword(payload)
-      .then(() =>
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Password reset link has been sent to your email address.",
-        })
-      )
-      .catch((err) => {
-        if (err.status === 400)
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "Please check the Email ID entered.",
-          });
-        else
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message: "Something went wrong. Please try again.",
-          });
-      });
-  };
-
-  return (
-    <form
-      className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-      onSubmit={handleSubmit(forgotPassword)}
-    >
-      <div className="space-y-1">
-        <Input
-          id="email"
-          type="email"
-          name="email"
-          register={register}
-          validations={{
-            required: "Email address is required",
-            validate: (value) =>
-              /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
-                value
-              ) || "Email address is not valid",
-          }}
-          error={errors.email}
-          placeholder="Enter registered email address.."
-          className="border-custom-border-300 h-[46px]"
-        />
-      </div>
-      <div className="mt-5 flex flex-col-reverse sm:flex-row items-center gap-2">
-        <SecondaryButton
-          className="w-full text-center h-[46px]"
-          onClick={() => setIsResettingPassword(false)}
-        >
-          Go Back
-        </SecondaryButton>
-        <PrimaryButton type="submit" className="w-full text-center h-[46px]" loading={isSubmitting}>
-          {isSubmitting ? "Sending link..." : "Send reset link"}
-        </PrimaryButton>
-      </div>
-    </form>
-  );
-};
diff --git a/web/components/account/email-signup-form.tsx b/web/components/account/email-signup-form.tsx
index 0a219741f..a11134d6b 100644
--- a/web/components/account/email-signup-form.tsx
+++ b/web/components/account/email-signup-form.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import Link from "next/link";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // ui
-import { Input, PrimaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
 type EmailPasswordFormValues = {
   email: string;
@@ -19,8 +19,8 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
   const { onSubmit } = props;
 
   const {
-    register,
     handleSubmit,
+    control,
     watch,
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<EmailPasswordFormValues>({
@@ -36,49 +36,60 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
 
   return (
     <>
-      <form
-        className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-        onSubmit={handleSubmit(onSubmit)}
-      >
+      <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
         <div className="space-y-1">
-          <Input
-            id="email"
-            type="email"
+          <Controller
+            control={control}
             name="email"
-            register={register}
-            validations={{
+            rules={{
               required: "Email address is required",
               validate: (value) =>
                 /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                   value
                 ) || "Email address is not valid",
             }}
-            error={errors.email}
-            placeholder="Enter your email address..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="email"
+                name="email"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.email)}
+                placeholder="Enter your email address..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
           />
         </div>
         <div className="space-y-1">
-          <Input
-            id="password"
-            type="password"
+          <Controller
+            control={control}
             name="password"
-            register={register}
-            validations={{
+            rules={{
               required: "Password is required",
             }}
-            error={errors.password}
-            placeholder="Enter your password..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                value={value ?? ""}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.password)}
+                placeholder="Enter your password..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
           />
         </div>
         <div className="space-y-1">
-          <Input
-            id="confirm_password"
-            type="password"
+          <Controller
+            control={control}
             name="confirm_password"
-            register={register}
-            validations={{
+            rules={{
               required: "Password is required",
               validate: (val: string) => {
                 if (watch("password") != val) {
@@ -86,27 +97,36 @@ export const EmailSignUpForm: React.FC<Props> = (props) => {
                 }
               },
             }}
-            error={errors.confirm_password}
-            placeholder="Confirm your password..."
-            className="border-custom-border-300 h-[46px]"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="confirm_password"
+                name="confirm_password"
+                type="password"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.confirm_password)}
+                placeholder="Confirm your password..."
+                className="border-custom-border-300 h-[46px] w-full"
+              />
+            )}
           />
         </div>
         <div className="text-right text-xs">
           <Link href="/">
-            <a className="text-custom-text-200 hover:text-custom-primary-100">
-              Already have an account? Sign in.
-            </a>
+            <a className="text-custom-text-200 hover:text-custom-primary-100">Already have an account? Sign in.</a>
           </Link>
         </div>
         <div>
-          <PrimaryButton
+          <Button
+            variant="primary"
             type="submit"
-            className="w-full text-center h-[46px]"
+            className="w-full"
             disabled={!isValid && isDirty}
             loading={isSubmitting}
           >
             {isSubmitting ? "Signing up..." : "Sign up"}
-          </PrimaryButton>
+          </Button>
         </div>
       </form>
     </>
diff --git a/web/components/account/google-login.tsx b/web/components/account/google-login.tsx
index 34e8cc886..768dcd6d5 100644
--- a/web/components/account/google-login.tsx
+++ b/web/components/account/google-login.tsx
@@ -54,11 +54,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
   return (
     <>
       <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
-      <div
-        className="overflow-hidden rounded w-full"
-        id="googleSignInButton"
-        ref={googleSignInButton}
-      />
+      <div className="overflow-hidden rounded w-full" id="googleSignInButton" ref={googleSignInButton} />
     </>
   );
 };
diff --git a/web/components/account/index.ts b/web/components/account/index.ts
index e3af244b6..36a204c62 100644
--- a/web/components/account/index.ts
+++ b/web/components/account/index.ts
@@ -1,6 +1,6 @@
 export * from "./email-code-form";
 export * from "./email-password-form";
-export * from "./email-reset-password-form";
+export * from "./email-forgot-password-form";
 export * from "./github-login-button";
 export * from "./google-login";
 export * from "./email-signup-form";
diff --git a/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx b/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
deleted file mode 100644
index 66917ed7c..000000000
--- a/web/components/analytics/custom-analytics/create-update-analytics-modal.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// headless ui
-import { Dialog, Transition } from "@headlessui/react";
-// services
-import analyticsService from "services/analytics.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-// types
-import { IAnalyticsParams, ISaveAnalyticsFormData } from "types";
-
-// types
-type Props = {
-  isOpen: boolean;
-  handleClose: () => void;
-  params?: IAnalyticsParams;
-};
-
-type FormValues = {
-  name: string;
-  description: string;
-};
-
-const defaultValues: FormValues = {
-  name: "",
-  description: "",
-};
-
-export const CreateUpdateAnalyticsModal: React.FC<Props> = ({ isOpen, handleClose, params }) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const {
-    register,
-    formState: { errors, isSubmitting },
-    handleSubmit,
-    reset,
-  } = useForm<FormValues>({
-    defaultValues,
-  });
-
-  const onClose = () => {
-    handleClose();
-    reset(defaultValues);
-  };
-
-  const onSubmit = async (formData: FormValues) => {
-    if (!workspaceSlug) return;
-
-    const payload: ISaveAnalyticsFormData = {
-      name: formData.name,
-      description: formData.description,
-      query_dict: {
-        x_axis: "priority",
-        y_axis: "issue_count",
-        ...params,
-        project: params?.project ?? [],
-      },
-    };
-
-    await analyticsService
-      .saveAnalytics(workspaceSlug.toString(), payload)
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Analytics saved successfully.",
-        });
-        onClose();
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Analytics could not be saved. Please try again.",
-        })
-      );
-  };
-
-  return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-30" onClose={onClose}>
-        <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-10 overflow-y-auto">
-          <div className="flex min-h-full items-center justify-center p-4 text-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 rounded-lg border border-custom-border-200 bg-custom-background-100 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <form onSubmit={handleSubmit(onSubmit)}>
-                  <div>
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
-                      Save Analytics
-                    </Dialog.Title>
-                    <div className="mt-5">
-                      <Input
-                        type="text"
-                        id="name"
-                        name="name"
-                        placeholder="Title"
-                        autoComplete="off"
-                        error={errors.name}
-                        register={register}
-                        width="full"
-                        validations={{
-                          required: "Title is required",
-                        }}
-                      />
-                      <TextArea
-                        id="description"
-                        name="description"
-                        placeholder="Description"
-                        className="mt-3 h-32 resize-none text-sm"
-                        error={errors.description}
-                        register={register}
-                      />
-                    </div>
-                  </div>
-                  <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
-                      {isSubmitting ? "Saving..." : "Save Analytics"}
-                    </PrimaryButton>
-                  </div>
-                </form>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-};
diff --git a/web/components/analytics/custom-analytics/custom-analytics.tsx b/web/components/analytics/custom-analytics/custom-analytics.tsx
index d04733b56..210d2c349 100644
--- a/web/components/analytics/custom-analytics/custom-analytics.tsx
+++ b/web/components/analytics/custom-analytics/custom-analytics.tsx
@@ -1,133 +1,76 @@
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
-import { Control, UseFormSetValue } from "react-hook-form";
-// hooks
-import useProjects from "hooks/use-projects";
+import useSWR from "swr";
+import { useForm } from "react-hook-form";
+import { observer } from "mobx-react-lite";
+// services
+import { AnalyticsService } from "services/analytics.service";
 // components
-import {
-  AnalyticsGraph,
-  AnalyticsSelectBar,
-  AnalyticsSidebar,
-  AnalyticsTable,
-} from "components/analytics";
-// ui
-import { Loader, PrimaryButton } from "components/ui";
-// helpers
-import { convertResponseToBarGraphData } from "helpers/analytics.helper";
+import { CustomAnalyticsSelectBar, CustomAnalyticsMainContent, CustomAnalyticsSidebar } from "components/analytics";
 // types
-import { IAnalyticsParams, IAnalyticsResponse, ICurrentUserResponse } from "types";
+import { IAnalyticsParams } from "types";
 // fetch-keys
 import { ANALYTICS } from "constants/fetch-keys";
 
 type Props = {
-  analytics: IAnalyticsResponse | undefined;
-  analyticsError: any;
-  params: IAnalyticsParams;
-  control: Control<IAnalyticsParams, any>;
-  setValue: UseFormSetValue<IAnalyticsParams>;
+  additionalParams?: Partial<IAnalyticsParams>;
   fullScreen: boolean;
-  user: ICurrentUserResponse | undefined;
 };
 
-export const CustomAnalytics: React.FC<Props> = ({
-  analytics,
-  analyticsError,
-  params,
-  control,
-  setValue,
-  fullScreen,
-  user,
-}) => {
+const defaultValues: IAnalyticsParams = {
+  x_axis: "priority",
+  y_axis: "issue_count",
+  segment: null,
+  project: null,
+};
+
+const analyticsService = new AnalyticsService();
+
+export const CustomAnalytics: React.FC<Props> = observer((props) => {
+  const { additionalParams, fullScreen } = props;
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { control, watch, setValue } = useForm({ defaultValues });
+
+  const params: IAnalyticsParams = {
+    x_axis: watch("x_axis"),
+    y_axis: watch("y_axis"),
+    segment: watch("segment"),
+    project: projectId ? [projectId.toString()] : watch("project"),
+    ...additionalParams,
+  };
+
+  const { data: analytics, error: analyticsError } = useSWR(
+    workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null,
+    workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
+  );
+
   const isProjectLevel = projectId ? true : false;
 
-  const yAxisKey = params.y_axis === "issue_count" ? "count" : "estimate";
-  const barGraphData = convertResponseToBarGraphData(analytics?.distribution, params);
-
-  const { projects } = useProjects();
-
   return (
-    <div
-      className={`overflow-hidden flex flex-col-reverse ${
-        fullScreen ? "md:grid md:grid-cols-4 md:h-full" : ""
-      }`}
-    >
+    <div className={`overflow-hidden flex flex-col-reverse ${fullScreen ? "md:grid md:grid-cols-4 md:h-full" : ""}`}>
       <div className="col-span-3 flex flex-col h-full overflow-hidden">
-        <AnalyticsSelectBar
+        <CustomAnalyticsSelectBar
           control={control}
           setValue={setValue}
-          projects={projects ?? []}
           params={params}
           fullScreen={fullScreen}
           isProjectLevel={isProjectLevel}
         />
-        {!analyticsError ? (
-          analytics ? (
-            analytics.total > 0 ? (
-              <div className="h-full overflow-y-auto">
-                <AnalyticsGraph
-                  analytics={analytics}
-                  barGraphData={barGraphData}
-                  params={params}
-                  yAxisKey={yAxisKey}
-                  fullScreen={fullScreen}
-                />
-                <AnalyticsTable
-                  analytics={analytics}
-                  barGraphData={barGraphData}
-                  params={params}
-                  yAxisKey={yAxisKey}
-                />
-              </div>
-            ) : (
-              <div className="grid h-full place-items-center p-5">
-                <div className="space-y-4 text-custom-text-200">
-                  <p className="text-sm">No matching issues found. Try changing the parameters.</p>
-                </div>
-              </div>
-            )
-          ) : (
-            <Loader className="space-y-6 p-5">
-              <Loader.Item height="300px" />
-              <Loader className="space-y-4">
-                <Loader.Item height="30px" />
-                <Loader.Item height="30px" />
-                <Loader.Item height="30px" />
-                <Loader.Item height="30px" />
-              </Loader>
-            </Loader>
-          )
-        ) : (
-          <div className="grid h-full place-items-center p-5">
-            <div className="space-y-4 text-custom-text-200">
-              <p className="text-sm">There was some error in fetching the data.</p>
-              <div className="flex items-center justify-center gap-2">
-                <PrimaryButton
-                  onClick={() => {
-                    if (!workspaceSlug) return;
-
-                    mutate(ANALYTICS(workspaceSlug.toString(), params));
-                  }}
-                >
-                  Refresh
-                </PrimaryButton>
-              </div>
-            </div>
-          </div>
-        )}
+        <CustomAnalyticsMainContent
+          analytics={analytics}
+          error={analyticsError}
+          fullScreen={fullScreen}
+          params={params}
+        />
       </div>
-      <AnalyticsSidebar
+      <CustomAnalyticsSidebar
         analytics={analytics}
         params={params}
         fullScreen={fullScreen}
         isProjectLevel={isProjectLevel}
-        user={user}
       />
     </div>
   );
-};
+});
diff --git a/web/components/analytics/custom-analytics/graph/index.tsx b/web/components/analytics/custom-analytics/graph/index.tsx
index 733d17437..9c9fff9ad 100644
--- a/web/components/analytics/custom-analytics/graph/index.tsx
+++ b/web/components/analytics/custom-analytics/graph/index.tsx
@@ -6,7 +6,7 @@ import { CustomTooltip } from "./custom-tooltip";
 import { BarGraph } from "components/ui";
 // helpers
 import { findStringWithMostCharacters } from "helpers/array.helper";
-import { generateBarColor } from "helpers/analytics.helper";
+import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse } from "types";
 
@@ -21,21 +21,7 @@ type Props = {
   fullScreen: boolean;
 };
 
-export const AnalyticsGraph: React.FC<Props> = ({
-  analytics,
-  barGraphData,
-  params,
-  yAxisKey,
-  fullScreen,
-}) => {
-  const renderAssigneeName = (assigneeId: string): string => {
-    const assignee = analytics.extras.assignee_details.find((a) => a.assignees__id === assigneeId);
-
-    if (!assignee) return "?";
-
-    return assignee.assignees__display_name || "?";
-  };
-
+export const AnalyticsGraph: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey, fullScreen }) => {
   const generateYAxisTickValues = () => {
     if (!analytics) return [];
 
@@ -110,7 +96,7 @@ export const AnalyticsGraph: React.FC<Props> = ({
                       <text x={0} y={21} textAnchor="middle" fontSize={9} fill="#ffffff">
                         {params.x_axis === "assignees__id"
                           ? datum.value && datum.value !== "None"
-                            ? renderAssigneeName(datum.value)[0].toUpperCase()
+                            ? generateDisplayName(datum.value, analytics, params, "x_axis")[0].toUpperCase()
                             : "?"
                           : datum.value && datum.value !== "None"
                           ? `${datum.value}`.toUpperCase()[0]
@@ -119,7 +105,13 @@ export const AnalyticsGraph: React.FC<Props> = ({
                     </g>
                   );
               }
-            : undefined,
+            : (datum) => (
+                <g transform={`translate(${datum.x},${datum.y})`}>
+                  <text x={0} y={21} textAnchor="middle" fontSize={10}>
+                    {generateDisplayName(datum.value, analytics, params, "x_axis")}
+                  </text>
+                </g>
+              ),
       }}
       theme={{
         axis: {},
diff --git a/web/components/analytics/custom-analytics/index.ts b/web/components/analytics/custom-analytics/index.ts
index ecdb29b74..9cb0ddd5b 100644
--- a/web/components/analytics/custom-analytics/index.ts
+++ b/web/components/analytics/custom-analytics/index.ts
@@ -1,6 +1,7 @@
 export * from "./graph";
-export * from "./create-update-analytics-modal";
+export * from "./select";
 export * from "./custom-analytics";
+export * from "./main-content";
 export * from "./select-bar";
 export * from "./sidebar";
 export * from "./table";
diff --git a/web/components/analytics/custom-analytics/main-content.tsx b/web/components/analytics/custom-analytics/main-content.tsx
new file mode 100644
index 000000000..5cfd15482
--- /dev/null
+++ b/web/components/analytics/custom-analytics/main-content.tsx
@@ -0,0 +1,85 @@
+import { useRouter } from "next/router";
+import { mutate } from "swr";
+
+// components
+import { AnalyticsGraph, AnalyticsTable } from "components/analytics";
+// ui
+import { Button, Loader } from "@plane/ui";
+// helpers
+import { convertResponseToBarGraphData } from "helpers/analytics.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse } from "types";
+// fetch-keys
+import { ANALYTICS } from "constants/fetch-keys";
+
+type Props = {
+  analytics: IAnalyticsResponse | undefined;
+  error: any;
+  fullScreen: boolean;
+  params: IAnalyticsParams;
+};
+
+export const CustomAnalyticsMainContent: React.FC<Props> = (props) => {
+  const { analytics, error, fullScreen, params } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const yAxisKey = params.y_axis === "issue_count" ? "count" : "estimate";
+  const barGraphData = convertResponseToBarGraphData(analytics?.distribution, params);
+
+  return (
+    <>
+      {!error ? (
+        analytics ? (
+          analytics.total > 0 ? (
+            <div className="h-full overflow-y-auto">
+              <AnalyticsGraph
+                analytics={analytics}
+                barGraphData={barGraphData}
+                params={params}
+                yAxisKey={yAxisKey}
+                fullScreen={fullScreen}
+              />
+              <AnalyticsTable analytics={analytics} barGraphData={barGraphData} params={params} yAxisKey={yAxisKey} />
+            </div>
+          ) : (
+            <div className="grid h-full place-items-center p-5">
+              <div className="space-y-4 text-custom-text-200">
+                <p className="text-sm">No matching issues found. Try changing the parameters.</p>
+              </div>
+            </div>
+          )
+        ) : (
+          <Loader className="space-y-6 p-5">
+            <Loader.Item height="300px" />
+            <Loader className="space-y-4">
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+              <Loader.Item height="30px" />
+            </Loader>
+          </Loader>
+        )
+      ) : (
+        <div className="grid h-full place-items-center p-5">
+          <div className="space-y-4 text-custom-text-200">
+            <p className="text-sm">There was some error in fetching the data.</p>
+            <div className="flex items-center justify-center gap-2">
+              <Button
+                variant="primary"
+                onClick={() => {
+                  if (!workspaceSlug) return;
+
+                  mutate(ANALYTICS(workspaceSlug.toString(), params));
+                }}
+              >
+                Refresh
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/analytics/custom-analytics/select-bar.tsx b/web/components/analytics/custom-analytics/select-bar.tsx
index 8c2b822e5..ef289f5c8 100644
--- a/web/components/analytics/custom-analytics/select-bar.tsx
+++ b/web/components/analytics/custom-analytics/select-bar.tsx
@@ -1,80 +1,85 @@
-// react-hook-form
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 import { Control, Controller, UseFormSetValue } from "react-hook-form";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
 import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "components/analytics";
 // types
-import { IAnalyticsParams, IProject } from "types";
+import { IAnalyticsParams } from "types";
 
 type Props = {
   control: Control<IAnalyticsParams, any>;
   setValue: UseFormSetValue<IAnalyticsParams>;
-  projects: IProject[];
   params: IAnalyticsParams;
   fullScreen: boolean;
   isProjectLevel: boolean;
 };
 
-export const AnalyticsSelectBar: React.FC<Props> = ({
-  control,
-  setValue,
-  projects,
-  params,
-  fullScreen,
-  isProjectLevel,
-}) => (
-  <div
-    className={`grid items-center gap-4 px-5 py-2.5 ${
-      isProjectLevel ? "grid-cols-3" : "grid-cols-2"
-    } ${fullScreen ? "lg:grid-cols-4 md:py-5" : ""}`}
-  >
-    {!isProjectLevel && (
+export const CustomAnalyticsSelectBar: React.FC<Props> = observer((props) => {
+  const { control, setValue, params, fullScreen, isProjectLevel } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { project: projectStore } = useMobxStore();
+
+  const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
+
+  return (
+    <div
+      className={`grid items-center gap-4 px-5 py-2.5 ${isProjectLevel ? "grid-cols-3" : "grid-cols-2"} ${
+        fullScreen ? "lg:grid-cols-4 md:py-5" : ""
+      }`}
+    >
+      {!isProjectLevel && (
+        <div>
+          <h6 className="text-xs text-custom-text-200">Project</h6>
+          <Controller
+            name="project"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <SelectProject value={value ?? undefined} onChange={onChange} projects={projectsList ?? undefined} />
+            )}
+          />
+        </div>
+      )}
       <div>
-        <h6 className="text-xs text-custom-text-200">Project</h6>
+        <h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
         <Controller
-          name="project"
+          name="y_axis"
+          control={control}
+          render={({ field: { value, onChange } }) => <SelectYAxis value={value} onChange={onChange} />}
+        />
+      </div>
+      <div>
+        <h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
+        <Controller
+          name="x_axis"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <SelectProject value={value} onChange={onChange} projects={projects} />
+            <SelectXAxis
+              value={value}
+              onChange={(val: string) => {
+                if (params.segment === val) setValue("segment", null);
+
+                onChange(val);
+              }}
+            />
+          )}
+        />
+      </div>
+      <div>
+        <h6 className="text-xs text-custom-text-200">Group</h6>
+        <Controller
+          name="segment"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <SelectSegment value={value} onChange={onChange} params={params} />
           )}
         />
       </div>
-    )}
-    <div>
-      <h6 className="text-xs text-custom-text-200">Measure (y-axis)</h6>
-      <Controller
-        name="y_axis"
-        control={control}
-        render={({ field: { value, onChange } }) => (
-          <SelectYAxis value={value} onChange={onChange} />
-        )}
-      />
     </div>
-    <div>
-      <h6 className="text-xs text-custom-text-200">Dimension (x-axis)</h6>
-      <Controller
-        name="x_axis"
-        control={control}
-        render={({ field: { value, onChange } }) => (
-          <SelectXAxis
-            value={value}
-            onChange={(val: string) => {
-              if (params.segment === val) setValue("segment", null);
-
-              onChange(val);
-            }}
-          />
-        )}
-      />
-    </div>
-    <div>
-      <h6 className="text-xs text-custom-text-200">Group</h6>
-      <Controller
-        name="segment"
-        control={control}
-        render={({ field: { value, onChange } }) => (
-          <SelectSegment value={value} onChange={onChange} params={params} />
-        )}
-      />
-    </div>
-  </div>
-);
+  );
+});
diff --git a/web/components/analytics/select/index.ts b/web/components/analytics/custom-analytics/select/index.ts
similarity index 100%
rename from web/components/analytics/select/index.ts
rename to web/components/analytics/custom-analytics/select/index.ts
diff --git a/web/components/analytics/select/project.tsx b/web/components/analytics/custom-analytics/select/project.tsx
similarity index 88%
rename from web/components/analytics/select/project.tsx
rename to web/components/analytics/custom-analytics/select/project.tsx
index 5d625bd02..8793cb27b 100644
--- a/web/components/analytics/select/project.tsx
+++ b/web/components/analytics/custom-analytics/select/project.tsx
@@ -4,9 +4,9 @@ import { CustomSearchSelect } from "components/ui";
 import { IProject } from "types";
 
 type Props = {
-  value: string[] | null | undefined;
+  value: string[] | undefined;
   onChange: (val: string[] | null) => void;
-  projects: IProject[];
+  projects: IProject[] | undefined;
 };
 
 export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) => {
@@ -29,7 +29,7 @@ export const SelectProject: React.FC<Props> = ({ value, onChange, projects }) =>
       label={
         value && value.length > 0
           ? projects
-              .filter((p) => value.includes(p.id))
+              ?.filter((p) => value.includes(p.id))
               .map((p) => p.identifier)
               .join(", ")
           : "All projects"
diff --git a/web/components/analytics/select/segment.tsx b/web/components/analytics/custom-analytics/select/segment.tsx
similarity index 89%
rename from web/components/analytics/select/segment.tsx
rename to web/components/analytics/custom-analytics/select/segment.tsx
index e125d8401..bdda33ddf 100644
--- a/web/components/analytics/select/segment.tsx
+++ b/web/components/analytics/custom-analytics/select/segment.tsx
@@ -34,8 +34,8 @@ export const SelectSegment: React.FC<Props> = ({ value, onChange, params }) => {
       <CustomSelect.Option value={null}>No value</CustomSelect.Option>
       {ANALYTICS_X_AXIS_VALUES.map((item) => {
         if (params.x_axis === item.value) return null;
-        if (cycleId && item.value === "issue_cycle__cycle__name") return null;
-        if (moduleId && item.value === "issue_module__module__name") return null;
+        if (cycleId && item.value === "issue_cycle__cycle_id") return null;
+        if (moduleId && item.value === "issue_module__module_id") return null;
 
         return (
           <CustomSelect.Option key={item.value} value={item.value}>
diff --git a/web/components/analytics/select/x-axis.tsx b/web/components/analytics/custom-analytics/select/x-axis.tsx
similarity index 86%
rename from web/components/analytics/select/x-axis.tsx
rename to web/components/analytics/custom-analytics/select/x-axis.tsx
index a403cad39..17dde2770 100644
--- a/web/components/analytics/select/x-axis.tsx
+++ b/web/components/analytics/custom-analytics/select/x-axis.tsx
@@ -25,8 +25,8 @@ export const SelectXAxis: React.FC<Props> = ({ value, onChange }) => {
       maxHeight="lg"
     >
       {ANALYTICS_X_AXIS_VALUES.map((item) => {
-        if (cycleId && item.value === "issue_cycle__cycle__name") return null;
-        if (moduleId && item.value === "issue_module__module__name") return null;
+        if (cycleId && item.value === "issue_cycle__cycle_id") return null;
+        if (moduleId && item.value === "issue_module__module_id") return null;
 
         return (
           <CustomSelect.Option key={item.value} value={item.value}>
diff --git a/web/components/analytics/select/y-axis.tsx b/web/components/analytics/custom-analytics/select/y-axis.tsx
similarity index 100%
rename from web/components/analytics/select/y-axis.tsx
rename to web/components/analytics/custom-analytics/select/y-axis.tsx
diff --git a/web/components/analytics/custom-analytics/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar.tsx
deleted file mode 100644
index 6189f325b..000000000
--- a/web/components/analytics/custom-analytics/sidebar.tsx
+++ /dev/null
@@ -1,381 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// services
-import analyticsService from "services/analytics.service";
-import projectService from "services/project.service";
-import cyclesService from "services/cycles.service";
-import modulesService from "services/modules.service";
-import trackEventServices from "services/track-event.service";
-// hooks
-import useProjects from "hooks/use-projects";
-import useToast from "hooks/use-toast";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-// icons
-import {
-  ArrowDownTrayIcon,
-  ArrowPathIcon,
-  CalendarDaysIcon,
-  UserGroupIcon,
-} from "@heroicons/react/24/outline";
-import { ContrastIcon, LayerDiagonalIcon } from "components/icons";
-// helpers
-import { renderShortDate } from "helpers/date-time.helper";
-import { renderEmoji } from "helpers/emoji.helper";
-import { truncateText } from "helpers/string.helper";
-// types
-import {
-  IAnalyticsParams,
-  IAnalyticsResponse,
-  ICurrentUserResponse,
-  IExportAnalyticsFormData,
-  IWorkspace,
-} from "types";
-// fetch-keys
-import { ANALYTICS, CYCLE_DETAILS, MODULE_DETAILS, PROJECT_DETAILS } from "constants/fetch-keys";
-// constants
-import { NETWORK_CHOICES } from "constants/project";
-
-type Props = {
-  analytics: IAnalyticsResponse | undefined;
-  params: IAnalyticsParams;
-  fullScreen: boolean;
-  isProjectLevel: boolean;
-  user: ICurrentUserResponse | undefined;
-};
-
-export const AnalyticsSidebar: React.FC<Props> = ({
-  analytics,
-  params,
-  fullScreen,
-  isProjectLevel = false,
-  user,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
-  const { projects } = useProjects();
-
-  const { setToastAlert } = useToast();
-
-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId && !(cycleId || moduleId)
-      ? PROJECT_DETAILS(projectId.toString())
-      : null,
-    workspaceSlug && projectId && !(cycleId || moduleId)
-      ? () => projectService.getProject(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const { data: cycleDetails } = useSWR(
-    workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString()
-          )
-      : null
-  );
-
-  const { data: moduleDetails } = useSWR(
-    workspaceSlug && projectId && moduleId ? MODULE_DETAILS(moduleId.toString()) : null,
-    workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString()
-          )
-      : null
-  );
-
-  const trackExportAnalytics = () => {
-    const eventPayload: any = {
-      workspaceSlug: workspaceSlug?.toString(),
-      params: {
-        x_axis: params.x_axis,
-        y_axis: params.y_axis,
-        group: params.segment,
-        project: params.project,
-      },
-    };
-
-    if (projectDetails) {
-      const workspaceDetails = projectDetails.workspace as IWorkspace;
-
-      eventPayload.workspaceId = workspaceDetails.id;
-      eventPayload.workspaceName = workspaceDetails.name;
-      eventPayload.projectId = projectDetails.id;
-      eventPayload.projectIdentifier = projectDetails.identifier;
-      eventPayload.projectName = projectDetails.name;
-    }
-
-    if (cycleDetails || moduleDetails) {
-      const details = cycleDetails || moduleDetails;
-
-      eventPayload.workspaceId = details?.workspace_detail?.id;
-      eventPayload.workspaceName = details?.workspace_detail?.name;
-      eventPayload.projectId = details?.project_detail.id;
-      eventPayload.projectIdentifier = details?.project_detail.identifier;
-      eventPayload.projectName = details?.project_detail.name;
-    }
-
-    if (cycleDetails) {
-      eventPayload.cycleId = cycleDetails.id;
-      eventPayload.cycleName = cycleDetails.name;
-    }
-
-    if (moduleDetails) {
-      eventPayload.moduleId = moduleDetails.id;
-      eventPayload.moduleName = moduleDetails.name;
-    }
-
-    trackEventServices.trackAnalyticsEvent(
-      eventPayload,
-      cycleId
-        ? "CYCLE_ANALYTICS_EXPORT"
-        : moduleId
-        ? "MODULE_ANALYTICS_EXPORT"
-        : projectId
-        ? "PROJECT_ANALYTICS_EXPORT"
-        : "WORKSPACE_ANALYTICS_EXPORT",
-      user
-    );
-  };
-
-  const exportAnalytics = () => {
-    if (!workspaceSlug) return;
-
-    const data: IExportAnalyticsFormData = {
-      x_axis: params.x_axis,
-      y_axis: params.y_axis,
-    };
-
-    if (params.segment) data.segment = params.segment;
-    if (params.project) data.project = params.project;
-
-    analyticsService
-      .exportAnalytics(workspaceSlug.toString(), data)
-      .then((res) => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: res.message,
-        });
-
-        trackExportAnalytics();
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "There was some error in exporting the analytics. Please try again.",
-        })
-      );
-  };
-
-  const selectedProjects =
-    params.project && params.project.length > 0 ? params.project : projects?.map((p) => p.id);
-
-  return (
-    <div
-      className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${
-        fullScreen
-          ? "border-l border-custom-border-200 md:h-full md:border-l md:border-custom-border-200 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
-          : ""
-      }`}
-    >
-      <div className="flex items-center gap-2 flex-wrap">
-        <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
-          <LayerDiagonalIcon height={14} width={14} />
-          {analytics ? analytics.total : "..."} Issues
-        </div>
-        {isProjectLevel && (
-          <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
-            <CalendarDaysIcon className="h-3.5 w-3.5" />
-            {renderShortDate(
-              (cycleId
-                ? cycleDetails?.created_at
-                : moduleId
-                ? moduleDetails?.created_at
-                : projectDetails?.created_at) ?? ""
-            )}
-          </div>
-        )}
-      </div>
-      <div className="h-full w-full overflow-hidden">
-        {fullScreen ? (
-          <>
-            {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
-              <div className="hidden h-full overflow-hidden md:flex md:flex-col">
-                <h4 className="font-medium">Selected Projects</h4>
-                <div className="space-y-6 mt-4 h-full overflow-y-auto">
-                  {selectedProjects.map((projectId) => {
-                    const project = projects?.find((p) => p.id === projectId);
-
-                    if (project)
-                      return (
-                        <div key={project.id} className="w-full">
-                          <div className="text-sm flex items-center gap-1">
-                            {project.emoji ? (
-                              <span className="grid h-6 w-6 flex-shrink-0 place-items-center">
-                                {renderEmoji(project.emoji)}
-                              </span>
-                            ) : project.icon_prop ? (
-                              <div className="h-6 w-6 grid place-items-center flex-shrink-0">
-                                {renderEmoji(project.icon_prop)}
-                              </div>
-                            ) : (
-                              <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                                {project?.name.charAt(0)}
-                              </span>
-                            )}
-                            <h5 className="flex items-center gap-1">
-                              <p className="break-words">{truncateText(project.name, 20)}</p>
-                              <span className="text-custom-text-200 text-xs ml-1">
-                                ({project.identifier})
-                              </span>
-                            </h5>
-                          </div>
-                          <div className="mt-4 space-y-3 pl-2 w-full">
-                            <div className="flex items-center justify-between gap-2 text-xs">
-                              <div className="flex items-center gap-2">
-                                <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
-                                <h6>Total members</h6>
-                              </div>
-                              <span className="text-custom-text-200">{project.total_members}</span>
-                            </div>
-                            <div className="flex items-center justify-between gap-2 text-xs">
-                              <div className="flex items-center gap-2">
-                                <ContrastIcon height={16} width={16} />
-                                <h6>Total cycles</h6>
-                              </div>
-                              <span className="text-custom-text-200">{project.total_cycles}</span>
-                            </div>
-                            <div className="flex items-center justify-between gap-2 text-xs">
-                              <div className="flex items-center gap-2">
-                                <UserGroupIcon className="h-4 w-4 text-custom-text-200" />
-                                <h6>Total modules</h6>
-                              </div>
-                              <span className="text-custom-text-200">{project.total_modules}</span>
-                            </div>
-                          </div>
-                        </div>
-                      );
-                  })}
-                </div>
-              </div>
-            )}
-            {projectId ? (
-              cycleId && cycleDetails ? (
-                <div className="hidden md:block h-full overflow-y-auto">
-                  <h4 className="font-medium break-words">Analytics for {cycleDetails.name}</h4>
-                  <div className="space-y-4 mt-4">
-                    <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-custom-text-200">Lead</h6>
-                      <span>{cycleDetails.owned_by?.display_name}</span>
-                    </div>
-                    <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-custom-text-200">Start Date</h6>
-                      <span>
-                        {cycleDetails.start_date && cycleDetails.start_date !== ""
-                          ? renderShortDate(cycleDetails.start_date)
-                          : "No start date"}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-custom-text-200">Target Date</h6>
-                      <span>
-                        {cycleDetails.end_date && cycleDetails.end_date !== ""
-                          ? renderShortDate(cycleDetails.end_date)
-                          : "No end date"}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              ) : moduleId && moduleDetails ? (
-                <div className="hidden md:block h-full overflow-y-auto">
-                  <h4 className="font-medium break-words">Analytics for {moduleDetails.name}</h4>
-                  <div className="space-y-4 mt-4">
-                    <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-custom-text-200">Lead</h6>
-                      <span>{moduleDetails.lead_detail?.display_name}</span>
-                    </div>
-                    <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-custom-text-200">Start Date</h6>
-                      <span>
-                        {moduleDetails.start_date && moduleDetails.start_date !== ""
-                          ? renderShortDate(moduleDetails.start_date)
-                          : "No start date"}
-                      </span>
-                    </div>
-                    <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-custom-text-200">Target Date</h6>
-                      <span>
-                        {moduleDetails.target_date && moduleDetails.target_date !== ""
-                          ? renderShortDate(moduleDetails.target_date)
-                          : "No end date"}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              ) : (
-                <div className="hidden md:flex md:flex-col h-full overflow-y-auto">
-                  <div className="flex items-center gap-1">
-                    {projectDetails?.emoji ? (
-                      <div className="grid h-6 w-6 flex-shrink-0 place-items-center">
-                        {renderEmoji(projectDetails.emoji)}
-                      </div>
-                    ) : projectDetails?.icon_prop ? (
-                      <div className="h-6 w-6 grid place-items-center flex-shrink-0">
-                        {renderEmoji(projectDetails.icon_prop)}
-                      </div>
-                    ) : (
-                      <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                        {projectDetails?.name.charAt(0)}
-                      </span>
-                    )}
-                    <h4 className="font-medium break-words">{projectDetails?.name}</h4>
-                  </div>
-                  <div className="space-y-4 mt-4">
-                    <div className="flex items-center gap-2 text-xs">
-                      <h6 className="text-custom-text-200">Network</h6>
-                      <span>
-                        {NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ??
-                          ""}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              )
-            ) : null}
-          </>
-        ) : null}
-      </div>
-      <div className="flex items-center gap-2 flex-wrap justify-self-end">
-        <SecondaryButton
-          onClick={() => {
-            if (!workspaceSlug) return;
-
-            mutate(ANALYTICS(workspaceSlug.toString(), params));
-          }}
-        >
-          <div className="flex items-center gap-2 -my-1">
-            <ArrowPathIcon className="h-3.5 w-3.5" />
-            Refresh
-          </div>
-        </SecondaryButton>
-        <PrimaryButton onClick={exportAnalytics}>
-          <div className="flex items-center gap-2 -my-1">
-            <ArrowDownTrayIcon className="h-3.5 w-3.5" />
-            Export as CSV
-          </div>
-        </PrimaryButton>
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/analytics/custom-analytics/sidebar/index.ts b/web/components/analytics/custom-analytics/sidebar/index.ts
new file mode 100644
index 000000000..db9adae85
--- /dev/null
+++ b/web/components/analytics/custom-analytics/sidebar/index.ts
@@ -0,0 +1,3 @@
+export * from "./projects-list";
+export * from "./sidebar-header";
+export * from "./sidebar";
diff --git a/web/components/analytics/custom-analytics/sidebar/projects-list.tsx b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
new file mode 100644
index 000000000..21c7a2e11
--- /dev/null
+++ b/web/components/analytics/custom-analytics/sidebar/projects-list.tsx
@@ -0,0 +1,65 @@
+// icons
+import { Contrast, LayoutGrid, Users } from "lucide-react";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+import { truncateText } from "helpers/string.helper";
+// types
+import { IProject } from "types";
+
+type Props = {
+  projects: IProject[];
+};
+
+export const CustomAnalyticsSidebarProjectsList: React.FC<Props> = (props) => {
+  const { projects } = props;
+
+  return (
+    <div className="hidden h-full overflow-hidden md:flex md:flex-col">
+      <h4 className="font-medium">Selected Projects</h4>
+      <div className="space-y-6 mt-4 h-full overflow-y-auto">
+        {projects.map((project) => (
+          <div key={project.id} className="w-full">
+            <div className="text-sm flex items-center gap-1">
+              {project.emoji ? (
+                <span className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(project.emoji)}</span>
+              ) : project.icon_prop ? (
+                <div className="h-6 w-6 grid place-items-center flex-shrink-0">{renderEmoji(project.icon_prop)}</div>
+              ) : (
+                <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                  {project?.name.charAt(0)}
+                </span>
+              )}
+              <h5 className="flex items-center gap-1">
+                <p className="break-words">{truncateText(project.name, 20)}</p>
+                <span className="text-custom-text-200 text-xs ml-1">({project.identifier})</span>
+              </h5>
+            </div>
+            <div className="mt-4 space-y-3 pl-2 w-full">
+              <div className="flex items-center justify-between gap-2 text-xs">
+                <div className="flex items-center gap-2">
+                  <Users className="text-custom-text-200" size={14} strokeWidth={2} />
+                  <h6>Total members</h6>
+                </div>
+                <span className="text-custom-text-200">{project.total_members}</span>
+              </div>
+              <div className="flex items-center justify-between gap-2 text-xs">
+                <div className="flex items-center gap-2">
+                  <Contrast className="text-custom-text-200" size={14} strokeWidth={2} />
+                  <h6>Total cycles</h6>
+                </div>
+                <span className="text-custom-text-200">{project.total_cycles}</span>
+              </div>
+              <div className="flex items-center justify-between gap-2 text-xs">
+                <div className="flex items-center gap-2">
+                  <LayoutGrid className="text-custom-text-200" size={14} strokeWidth={2} />
+                  <h6>Total modules</h6>
+                </div>
+                <span className="text-custom-text-200">{project.total_modules}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
new file mode 100644
index 000000000..6821731fd
--- /dev/null
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar-header.tsx
@@ -0,0 +1,107 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+import { renderShortDate } from "helpers/date-time.helper";
+// constants
+import { NETWORK_CHOICES } from "constants/project";
+
+export const CustomAnalyticsSidebarHeader = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { cycle: cycleStore, module: moduleStore, project: projectStore } = useMobxStore();
+
+  const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
+  const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
+  const projectDetails =
+    workspaceSlug && projectId
+      ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
+      : undefined;
+
+  return (
+    <>
+      {projectId ? (
+        cycleDetails ? (
+          <div className="hidden md:block h-full overflow-y-auto">
+            <h4 className="font-medium break-words">Analytics for {cycleDetails.name}</h4>
+            <div className="space-y-4 mt-4">
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Lead</h6>
+                <span>{cycleDetails.owned_by?.display_name}</span>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Start Date</h6>
+                <span>
+                  {cycleDetails.start_date && cycleDetails.start_date !== ""
+                    ? renderShortDate(cycleDetails.start_date)
+                    : "No start date"}
+                </span>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Target Date</h6>
+                <span>
+                  {cycleDetails.end_date && cycleDetails.end_date !== ""
+                    ? renderShortDate(cycleDetails.end_date)
+                    : "No end date"}
+                </span>
+              </div>
+            </div>
+          </div>
+        ) : moduleDetails ? (
+          <div className="hidden md:block h-full overflow-y-auto">
+            <h4 className="font-medium break-words">Analytics for {moduleDetails.name}</h4>
+            <div className="space-y-4 mt-4">
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Lead</h6>
+                <span>{moduleDetails.lead_detail?.display_name}</span>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Start Date</h6>
+                <span>
+                  {moduleDetails.start_date && moduleDetails.start_date !== ""
+                    ? renderShortDate(moduleDetails.start_date)
+                    : "No start date"}
+                </span>
+              </div>
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Target Date</h6>
+                <span>
+                  {moduleDetails.target_date && moduleDetails.target_date !== ""
+                    ? renderShortDate(moduleDetails.target_date)
+                    : "No end date"}
+                </span>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="hidden md:flex md:flex-col h-full overflow-y-auto">
+            <div className="flex items-center gap-1">
+              {projectDetails?.emoji ? (
+                <div className="grid h-6 w-6 flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</div>
+              ) : projectDetails?.icon_prop ? (
+                <div className="h-6 w-6 grid place-items-center flex-shrink-0">
+                  {renderEmoji(projectDetails.icon_prop)}
+                </div>
+              ) : (
+                <span className="grid h-6 w-6 mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                  {projectDetails?.name.charAt(0)}
+                </span>
+              )}
+              <h4 className="font-medium break-words">{projectDetails?.name}</h4>
+            </div>
+            <div className="space-y-4 mt-4">
+              <div className="flex items-center gap-2 text-xs">
+                <h6 className="text-custom-text-200">Network</h6>
+                <span>{NETWORK_CHOICES.find((n) => n.key === projectDetails?.network)?.label ?? ""}</span>
+              </div>
+            </div>
+          </div>
+        )
+      ) : null}
+    </>
+  );
+});
diff --git a/web/components/analytics/custom-analytics/sidebar/sidebar.tsx b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
new file mode 100644
index 000000000..dde3bd834
--- /dev/null
+++ b/web/components/analytics/custom-analytics/sidebar/sidebar.tsx
@@ -0,0 +1,215 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { mutate } from "swr";
+// services
+import { AnalyticsService } from "services/analytics.service";
+import { TrackEventService } from "services/track_event.service";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CustomAnalyticsSidebarHeader, CustomAnalyticsSidebarProjectsList } from "components/analytics";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { ArrowDownTrayIcon, ArrowPathIcon, CalendarDaysIcon } from "@heroicons/react/24/outline";
+import { LayerDiagonalIcon } from "components/icons";
+// helpers
+import { renderShortDate } from "helpers/date-time.helper";
+// types
+import { IAnalyticsParams, IAnalyticsResponse, IExportAnalyticsFormData, IWorkspace } from "types";
+// fetch-keys
+import { ANALYTICS } from "constants/fetch-keys";
+
+type Props = {
+  analytics: IAnalyticsResponse | undefined;
+  params: IAnalyticsParams;
+  fullScreen: boolean;
+  isProjectLevel: boolean;
+};
+
+const analyticsService = new AnalyticsService();
+const trackEventService = new TrackEventService();
+
+export const CustomAnalyticsSidebar: React.FC<Props> = observer(
+  ({ analytics, params, fullScreen, isProjectLevel = false }) => {
+    const router = useRouter();
+    const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+    const { setToastAlert } = useToast();
+
+    const { user: userStore, project: projectStore, cycle: cycleStore, module: moduleStore } = useMobxStore();
+
+    const user = userStore.currentUser;
+
+    const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined;
+    const projectDetails =
+      workspaceSlug && projectId
+        ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString()) ?? undefined
+        : undefined;
+
+    const trackExportAnalytics = () => {
+      if (!user) return;
+
+      const eventPayload: any = {
+        workspaceSlug: workspaceSlug?.toString(),
+        params: {
+          x_axis: params.x_axis,
+          y_axis: params.y_axis,
+          group: params.segment,
+          project: params.project,
+        },
+      };
+
+      if (projectDetails) {
+        const workspaceDetails = projectDetails.workspace as IWorkspace;
+
+        eventPayload.workspaceId = workspaceDetails.id;
+        eventPayload.workspaceName = workspaceDetails.name;
+        eventPayload.projectId = projectDetails.id;
+        eventPayload.projectIdentifier = projectDetails.identifier;
+        eventPayload.projectName = projectDetails.name;
+      }
+
+      if (cycleDetails || moduleDetails) {
+        const details = cycleDetails || moduleDetails;
+
+        eventPayload.workspaceId = details?.workspace_detail?.id;
+        eventPayload.workspaceName = details?.workspace_detail?.name;
+        eventPayload.projectId = details?.project_detail.id;
+        eventPayload.projectIdentifier = details?.project_detail.identifier;
+        eventPayload.projectName = details?.project_detail.name;
+      }
+
+      if (cycleDetails) {
+        eventPayload.cycleId = cycleDetails.id;
+        eventPayload.cycleName = cycleDetails.name;
+      }
+
+      if (moduleDetails) {
+        eventPayload.moduleId = moduleDetails.id;
+        eventPayload.moduleName = moduleDetails.name;
+      }
+
+      trackEventService.trackAnalyticsEvent(
+        eventPayload,
+        cycleId
+          ? "CYCLE_ANALYTICS_EXPORT"
+          : moduleId
+          ? "MODULE_ANALYTICS_EXPORT"
+          : projectId
+          ? "PROJECT_ANALYTICS_EXPORT"
+          : "WORKSPACE_ANALYTICS_EXPORT",
+        user
+      );
+    };
+
+    const exportAnalytics = () => {
+      if (!workspaceSlug) return;
+
+      const data: IExportAnalyticsFormData = {
+        x_axis: params.x_axis,
+        y_axis: params.y_axis,
+      };
+
+      if (params.segment) data.segment = params.segment;
+      if (params.project) data.project = params.project;
+
+      analyticsService
+        .exportAnalytics(workspaceSlug.toString(), data)
+        .then((res) => {
+          setToastAlert({
+            type: "success",
+            title: "Success!",
+            message: res.message,
+          });
+
+          trackExportAnalytics();
+        })
+        .catch(() =>
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "There was some error in exporting the analytics. Please try again.",
+          })
+        );
+    };
+
+    const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
+    const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
+
+    // fetch cycle details
+    useEffect(() => {
+      if (!workspaceSlug || !projectId || !cycleId || cycleDetails) return;
+
+      cycleStore.fetchCycleWithId(workspaceSlug.toString(), projectId.toString(), cycleId.toString());
+    }, [cycleId, cycleDetails, cycleStore, projectId, workspaceSlug]);
+
+    // fetch module details
+    useEffect(() => {
+      if (!workspaceSlug || !projectId || !moduleId || moduleDetails) return;
+
+      moduleStore.fetchModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString());
+    }, [moduleId, moduleDetails, moduleStore, projectId, workspaceSlug]);
+
+    const selectedProjects = params.project && params.project.length > 0 ? params.project : projects?.map((p) => p.id);
+
+    return (
+      <div
+        className={`px-5 py-2.5 flex items-center justify-between space-y-2 ${
+          fullScreen
+            ? "border-l border-custom-border-200 md:h-full md:border-l md:border-custom-border-200 md:space-y-4 overflow-hidden md:flex-col md:items-start md:py-5"
+            : ""
+        }`}
+      >
+        <div className="flex items-center gap-2 flex-wrap">
+          <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
+            <LayerDiagonalIcon height={14} width={14} />
+            {analytics ? analytics.total : "..."} Issues
+          </div>
+          {isProjectLevel && (
+            <div className="flex items-center gap-1 bg-custom-background-80 rounded-md px-3 py-1 text-custom-text-200 text-xs">
+              <CalendarDaysIcon className="h-3.5 w-3.5" />
+              {renderShortDate(
+                (cycleId
+                  ? cycleDetails?.created_at
+                  : moduleId
+                  ? moduleDetails?.created_at
+                  : projectDetails?.created_at) ?? ""
+              )}
+            </div>
+          )}
+        </div>
+        <div className="h-full w-full overflow-hidden">
+          {fullScreen ? (
+            <>
+              {!isProjectLevel && selectedProjects && selectedProjects.length > 0 && (
+                <CustomAnalyticsSidebarProjectsList
+                  projects={projects?.filter((p) => selectedProjects.includes(p.id)) ?? []}
+                />
+              )}
+              <CustomAnalyticsSidebarHeader />
+            </>
+          ) : null}
+        </div>
+        <div className="flex items-center gap-2 flex-wrap justify-self-end">
+          <Button
+            variant="neutral-primary"
+            prependIcon={<ArrowPathIcon className="h-3.5 w-3.5" />}
+            onClick={() => {
+              if (!workspaceSlug) return;
+
+              mutate(ANALYTICS(workspaceSlug.toString(), params));
+            }}
+          >
+            Refresh
+          </Button>
+          <Button variant="primary" prependIcon={<ArrowDownTrayIcon />} onClick={exportAnalytics}>
+            Export as CSV
+          </Button>
+        </div>
+      </div>
+    );
+  }
+);
diff --git a/web/components/analytics/custom-analytics/table.tsx b/web/components/analytics/custom-analytics/table.tsx
index 5993bb63c..c5c36c71a 100644
--- a/web/components/analytics/custom-analytics/table.tsx
+++ b/web/components/analytics/custom-analytics/table.tsx
@@ -1,15 +1,13 @@
-// nivo
 import { BarDatum } from "@nivo/bar";
+
 // icons
 import { PriorityIcon } from "components/icons";
 // helpers
-import { addSpaceIfCamelCase } from "helpers/string.helper";
-// helpers
-import { generateBarColor, renderMonthAndYear } from "helpers/analytics.helper";
+import { generateBarColor, generateDisplayName } from "helpers/analytics.helper";
 // types
 import { IAnalyticsParams, IAnalyticsResponse, TIssuePriorities } from "types";
 // constants
-import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, DATE_KEYS } from "constants/analytics";
+import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES } from "constants/analytics";
 
 type Props = {
   analytics: IAnalyticsResponse;
@@ -21,112 +19,81 @@ type Props = {
   yAxisKey: "count" | "estimate";
 };
 
-export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => {
-  const renderAssigneeName = (assigneeId: string): string => {
-    const assignee = analytics.extras.assignee_details.find((a) => a.assignees__id === assigneeId);
-
-    if (!assignee) return "No assignee";
-
-    return assignee.assignees__display_name || "No assignee";
-  };
-
-  return (
-    <div className="flow-root">
-      <div className="overflow-x-auto">
-        <div className="inline-block min-w-full align-middle">
-          <table className="min-w-full divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
-            <thead className="bg-custom-background-80">
-              <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
-                <th scope="col" className="py-3 px-2.5 text-left font-medium">
-                  {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
-                </th>
-                {params.segment ? (
-                  barGraphData.xAxisKeys.map((key) => (
-                    <th
-                      key={`segment-${key}`}
-                      scope="col"
-                      className={`px-2.5 py-3 text-left font-medium ${
-                        params.segment === "priority" || params.segment === "state__group"
-                          ? "capitalize"
-                          : ""
-                      }`}
-                    >
-                      <div className="flex items-center gap-2">
-                        {params.segment === "priority" ? (
-                          <PriorityIcon priority={key as TIssuePriorities} />
-                        ) : (
-                          <span
-                            className="h-3 w-3 flex-shrink-0 rounded"
-                            style={{
-                              backgroundColor: generateBarColor(key, analytics, params, "segment"),
-                            }}
-                          />
-                        )}
-                        {params.segment === "assignees__id"
-                          ? renderAssigneeName(key)
-                          : DATE_KEYS.includes(params.segment ?? "")
-                          ? renderMonthAndYear(key)
-                          : key}
-                      </div>
-                    </th>
-                  ))
-                ) : (
-                  <th scope="col" className="py-3 px-2.5 text-left font-medium sm:pr-0">
-                    {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
-                  </th>
-                )}
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-custom-border-200">
-              {barGraphData.data.map((item, index) => (
-                <tr
-                  key={`table-row-${index}`}
-                  className="divide-x divide-custom-border-200 text-xs text-custom-text-200"
-                >
-                  <td
-                    className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
-                      params.x_axis === "priority" || params.x_axis === "state__group"
-                        ? "capitalize"
-                        : ""
+export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, params, yAxisKey }) => (
+  <div className="flow-root">
+    <div className="overflow-x-auto">
+      <div className="inline-block min-w-full align-middle">
+        <table className="min-w-full divide-y divide-custom-border-200 whitespace-nowrap border-y border-custom-border-200">
+          <thead className="bg-custom-background-80">
+            <tr className="divide-x divide-custom-border-200 text-sm text-custom-text-100">
+              <th scope="col" className="py-3 px-2.5 text-left font-medium">
+                {ANALYTICS_X_AXIS_VALUES.find((v) => v.value === params.x_axis)?.label}
+              </th>
+              {params.segment ? (
+                barGraphData.xAxisKeys.map((key) => (
+                  <th
+                    key={`segment-${key}`}
+                    scope="col"
+                    className={`px-2.5 py-3 text-left font-medium ${
+                      params.segment === "priority" || params.segment === "state__group" ? "capitalize" : ""
                     }`}
                   >
-                    {params.x_axis === "priority" ? (
-                      <PriorityIcon priority={item.name as TIssuePriorities} />
-                    ) : (
-                      <span
-                        className="h-3 w-3 rounded"
-                        style={{
-                          backgroundColor: generateBarColor(
-                            `${item.name}`,
-                            analytics,
-                            params,
-                            "x_axis"
-                          ),
-                        }}
-                      />
-                    )}
-                    {params.x_axis === "assignees__id"
-                      ? renderAssigneeName(`${item.name}`)
-                      : addSpaceIfCamelCase(`${item.name}`)}
-                  </td>
-                  {params.segment ? (
-                    barGraphData.xAxisKeys.map((key, index) => (
-                      <td
-                        key={`segment-value-${index}`}
-                        className="whitespace-nowrap py-2 px-2.5 sm:pr-0"
-                      >
-                        {item[key] ?? 0}
-                      </td>
-                    ))
+                    <div className="flex items-center gap-2">
+                      {params.segment === "priority" ? (
+                        <PriorityIcon priority={key as TIssuePriorities} />
+                      ) : (
+                        <span
+                          className="h-3 w-3 flex-shrink-0 rounded"
+                          style={{
+                            backgroundColor: generateBarColor(key, analytics, params, "segment"),
+                          }}
+                        />
+                      )}
+                      {generateDisplayName(key, analytics, params, "segment")}
+                    </div>
+                  </th>
+                ))
+              ) : (
+                <th scope="col" className="py-3 px-2.5 text-left font-medium sm:pr-0">
+                  {ANALYTICS_Y_AXIS_VALUES.find((v) => v.value === params.y_axis)?.label}
+                </th>
+              )}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-custom-border-200">
+            {barGraphData.data.map((item, index) => (
+              <tr key={`table-row-${index}`} className="divide-x divide-custom-border-200 text-xs text-custom-text-200">
+                <td
+                  className={`flex items-center gap-2 whitespace-nowrap py-2 px-2.5 font-medium ${
+                    params.x_axis === "priority" || params.x_axis === "state__group" ? "capitalize" : ""
+                  }`}
+                >
+                  {params.x_axis === "priority" ? (
+                    <PriorityIcon priority={item.name as TIssuePriorities} />
                   ) : (
-                    <td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
+                    <span
+                      className="h-3 w-3 rounded"
+                      style={{
+                        backgroundColor: generateBarColor(`${item.name}`, analytics, params, "x_axis"),
+                      }}
+                    />
                   )}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+                  {generateDisplayName(`${item.name}`, analytics, params, "x_axis")}
+                </td>
+                {params.segment ? (
+                  barGraphData.xAxisKeys.map((key, index) => (
+                    <td key={`segment-value-${index}`} className="whitespace-nowrap py-2 px-2.5 sm:pr-0">
+                      {item[key] ?? 0}
+                    </td>
+                  ))
+                ) : (
+                  <td className="whitespace-nowrap py-2 px-2.5 sm:pr-0">{item[yAxisKey]}</td>
+                )}
+              </tr>
+            ))}
+          </tbody>
+        </table>
       </div>
     </div>
-  );
-};
+  </div>
+);
diff --git a/web/components/analytics/index.ts b/web/components/analytics/index.ts
index ec0fd5dc1..c5f769890 100644
--- a/web/components/analytics/index.ts
+++ b/web/components/analytics/index.ts
@@ -1,4 +1,3 @@
 export * from "./custom-analytics";
 export * from "./scope-and-demand";
-export * from "./select";
 export * from "./project-modal";
diff --git a/web/components/analytics/project-modal.tsx b/web/components/analytics/project-modal.tsx
deleted file mode 100644
index d8bb841f7..000000000
--- a/web/components/analytics/project-modal.tsx
+++ /dev/null
@@ -1,225 +0,0 @@
-import React, { Fragment, useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// headless ui
-import { Tab } from "@headlessui/react";
-// services
-import analyticsService from "services/analytics.service";
-import projectService from "services/project.service";
-import cyclesService from "services/cycles.service";
-import modulesService from "services/modules.service";
-import trackEventServices from "services/track-event.service";
-// components
-import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
-// icons
-import {
-  ArrowsPointingInIcon,
-  ArrowsPointingOutIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
-// types
-import { IAnalyticsParams, IWorkspace } from "types";
-// fetch-keys
-import { ANALYTICS, CYCLE_DETAILS, MODULE_DETAILS, PROJECT_DETAILS } from "constants/fetch-keys";
-import useUserAuth from "hooks/use-user-auth";
-
-type Props = {
-  isOpen: boolean;
-  onClose: () => void;
-};
-
-const defaultValues: IAnalyticsParams = {
-  x_axis: "priority",
-  y_axis: "issue_count",
-  segment: null,
-  project: null,
-};
-
-const tabsList = ["Scope and Demand", "Custom Analytics"];
-
-export const AnalyticsProjectModal: React.FC<Props> = ({ isOpen, onClose }) => {
-  const [fullScreen, setFullScreen] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
-
-  const { user } = useUserAuth();
-
-  const { control, watch, setValue } = useForm<IAnalyticsParams>({ defaultValues });
-
-  const params: IAnalyticsParams = {
-    x_axis: watch("x_axis"),
-    y_axis: watch("y_axis"),
-    segment: watch("segment"),
-    project: projectId ? [projectId.toString()] : watch("project"),
-    cycle: cycleId ? cycleId.toString() : null,
-    module: moduleId ? moduleId.toString() : null,
-  };
-
-  const { data: analytics, error: analyticsError } = useSWR(
-    workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
-  );
-
-  const { data: projectDetails } = useSWR(
-    workspaceSlug && projectId && !(cycleId || moduleId)
-      ? PROJECT_DETAILS(projectId.toString())
-      : null,
-    workspaceSlug && projectId && !(cycleId || moduleId)
-      ? () => projectService.getProject(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-
-  const { data: cycleDetails } = useSWR(
-    workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId.toString()) : null,
-    workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString()
-          )
-      : null
-  );
-
-  const { data: moduleDetails } = useSWR(
-    workspaceSlug && projectId && moduleId ? MODULE_DETAILS(moduleId.toString()) : null,
-    workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString()
-          )
-      : null
-  );
-
-  const trackAnalyticsEvent = (tab: string) => {
-    const eventPayload: any = {
-      workspaceSlug: workspaceSlug?.toString(),
-    };
-
-    if (projectDetails) {
-      const workspaceDetails = projectDetails.workspace as IWorkspace;
-
-      eventPayload.workspaceId = workspaceDetails.id;
-      eventPayload.workspaceName = workspaceDetails.name;
-      eventPayload.projectId = projectDetails.id;
-      eventPayload.projectIdentifier = projectDetails.identifier;
-      eventPayload.projectName = projectDetails.name;
-    }
-
-    if (cycleDetails || moduleDetails) {
-      const details = cycleDetails || moduleDetails;
-
-      eventPayload.workspaceId = details?.workspace_detail?.id;
-      eventPayload.workspaceName = details?.workspace_detail?.name;
-      eventPayload.projectId = details?.project_detail.id;
-      eventPayload.projectIdentifier = details?.project_detail.identifier;
-      eventPayload.projectName = details?.project_detail.name;
-    }
-
-    if (cycleDetails) {
-      eventPayload.cycleId = cycleDetails.id;
-      eventPayload.cycleName = cycleDetails.name;
-    }
-
-    if (moduleDetails) {
-      eventPayload.moduleId = moduleDetails.id;
-      eventPayload.moduleName = moduleDetails.name;
-    }
-
-    const eventType =
-      tab === "Scope and Demand" ? "SCOPE_AND_DEMAND_ANALYTICS" : "CUSTOM_ANALYTICS";
-
-    trackEventServices.trackAnalyticsEvent(
-      eventPayload,
-      cycleId ? `CYCLE_${eventType}` : moduleId ? `MODULE_${eventType}` : `PROJECT_${eventType}`,
-      user
-    );
-  };
-
-  const handleClose = () => {
-    onClose();
-  };
-
-  return (
-    <div
-      className={`absolute top-0 z-30 h-full bg-custom-background-90 ${
-        fullScreen ? "p-2 w-full" : "w-1/2"
-      } ${isOpen ? "right-0" : "-right-full"} duration-300 transition-all`}
-    >
-      <div
-        className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
-          fullScreen ? "rounded-lg border" : "border-l"
-        }`}
-      >
-        <div className="flex items-center justify-between gap-4 bg-custom-background-100 px-5 py-4 text-sm">
-          <h3 className="break-words">
-            Analytics for{" "}
-            {cycleId ? cycleDetails?.name : moduleId ? moduleDetails?.name : projectDetails?.name}
-          </h3>
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
-              onClick={() => setFullScreen((prevData) => !prevData)}
-            >
-              {fullScreen ? (
-                <ArrowsPointingInIcon className="h-4 w-4" />
-              ) : (
-                <ArrowsPointingOutIcon className="h-3 w-3" />
-              )}
-            </button>
-            <button
-              type="button"
-              className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
-              onClick={handleClose}
-            >
-              <XMarkIcon className="h-4 w-4" />
-            </button>
-          </div>
-        </div>
-        <Tab.Group as={Fragment}>
-          <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 p-5 pt-0">
-            {tabsList.map((tab) => (
-              <Tab
-                key={tab}
-                className={({ selected }) =>
-                  `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
-                    selected ? "bg-custom-background-80" : ""
-                  }`
-                }
-                onClick={() => trackAnalyticsEvent(tab)}
-              >
-                {tab}
-              </Tab>
-            ))}
-          </Tab.List>
-          {/* <h4 className="p-5 pb-0">Analytics for</h4> */}
-          <Tab.Panels as={Fragment}>
-            <Tab.Panel as={Fragment}>
-              <ScopeAndDemand fullScreen={fullScreen} />
-            </Tab.Panel>
-            <Tab.Panel as={Fragment}>
-              <CustomAnalytics
-                analytics={analytics}
-                analyticsError={analyticsError}
-                params={params}
-                control={control}
-                setValue={setValue}
-                fullScreen={fullScreen}
-                user={user}
-              />
-            </Tab.Panel>
-          </Tab.Panels>
-        </Tab.Group>
-      </div>
-    </div>
-  );
-};
diff --git a/web/components/analytics/project-modal/header.tsx b/web/components/analytics/project-modal/header.tsx
new file mode 100644
index 000000000..2cdd0a109
--- /dev/null
+++ b/web/components/analytics/project-modal/header.tsx
@@ -0,0 +1,37 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { Expand, Shrink, X } from "lucide-react";
+
+type Props = {
+  fullScreen: boolean;
+  handleClose: () => void;
+  setFullScreen: React.Dispatch<React.SetStateAction<boolean>>;
+  title: string;
+};
+
+export const ProjectAnalyticsModalHeader: React.FC<Props> = observer((props) => {
+  const { fullScreen, handleClose, setFullScreen, title } = props;
+
+  return (
+    <div className="flex items-center justify-between gap-4 bg-custom-background-100 px-5 py-4 text-sm">
+      <h3 className="break-words">Analytics for {title}</h3>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
+          onClick={() => setFullScreen((prevData) => !prevData)}
+        >
+          {fullScreen ? <Shrink size={14} strokeWidth={2} /> : <Expand size={14} strokeWidth={2} />}
+        </button>
+        <button
+          type="button"
+          className="grid place-items-center p-1 text-custom-text-200 hover:text-custom-text-100"
+          onClick={handleClose}
+        >
+          <X size={14} strokeWidth={2} />
+        </button>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/analytics/project-modal/index.ts b/web/components/analytics/project-modal/index.ts
new file mode 100644
index 000000000..70ca0260a
--- /dev/null
+++ b/web/components/analytics/project-modal/index.ts
@@ -0,0 +1,3 @@
+export * from "./header";
+export * from "./main-content";
+export * from "./modal";
diff --git a/web/components/analytics/project-modal/main-content.tsx b/web/components/analytics/project-modal/main-content.tsx
new file mode 100644
index 000000000..bdab57392
--- /dev/null
+++ b/web/components/analytics/project-modal/main-content.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import { Tab } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { TrackEventService } from "services/track_event.service";
+// components
+import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
+// types
+import { ICycle, IModule, IProject, IWorkspace } from "types";
+// constants
+import { ANALYTICS_TABS } from "constants/analytics";
+
+type Props = {
+  fullScreen: boolean;
+  cycleDetails: ICycle | undefined;
+  moduleDetails: IModule | undefined;
+  projectDetails: IProject | undefined;
+};
+
+const trackEventService = new TrackEventService();
+
+export const ProjectAnalyticsModalMainContent: React.FC<Props> = observer((props) => {
+  const { fullScreen, cycleDetails, moduleDetails, projectDetails } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { user: userStore } = useMobxStore();
+
+  const user = userStore.currentUser;
+
+  const trackAnalyticsEvent = (tab: string) => {
+    if (!workspaceSlug || !user) return;
+
+    const eventPayload: any = {
+      workspaceSlug: workspaceSlug.toString(),
+    };
+
+    if (projectDetails) {
+      const workspaceDetails = projectDetails.workspace as IWorkspace;
+
+      eventPayload.workspaceId = workspaceDetails.id;
+      eventPayload.workspaceName = workspaceDetails.name;
+      eventPayload.projectId = projectDetails.id;
+      eventPayload.projectIdentifier = projectDetails.identifier;
+      eventPayload.projectName = projectDetails.name;
+    }
+
+    if (cycleDetails || moduleDetails) {
+      const details = cycleDetails || moduleDetails;
+
+      eventPayload.workspaceId = details?.workspace_detail?.id;
+      eventPayload.workspaceName = details?.workspace_detail?.name;
+      eventPayload.projectId = details?.project_detail.id;
+      eventPayload.projectIdentifier = details?.project_detail.identifier;
+      eventPayload.projectName = details?.project_detail.name;
+    }
+
+    if (cycleDetails) {
+      eventPayload.cycleId = cycleDetails.id;
+      eventPayload.cycleName = cycleDetails.name;
+    }
+
+    if (moduleDetails) {
+      eventPayload.moduleId = moduleDetails.id;
+      eventPayload.moduleName = moduleDetails.name;
+    }
+
+    const eventType = tab === "scope_and_demand" ? "SCOPE_AND_DEMAND_ANALYTICS" : "CUSTOM_ANALYTICS";
+
+    trackEventService.trackAnalyticsEvent(
+      eventPayload,
+      cycleDetails ? `CYCLE_${eventType}` : moduleDetails ? `MODULE_${eventType}` : `PROJECT_${eventType}`,
+      user
+    );
+  };
+
+  return (
+    <Tab.Group as={React.Fragment}>
+      <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 p-5 pt-0">
+        {ANALYTICS_TABS.map((tab) => (
+          <Tab
+            key={tab.key}
+            className={({ selected }) =>
+              `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
+                selected ? "bg-custom-background-80" : ""
+              }`
+            }
+            onClick={() => trackAnalyticsEvent(tab.key)}
+          >
+            {tab.title}
+          </Tab>
+        ))}
+      </Tab.List>
+      <Tab.Panels as={React.Fragment}>
+        <Tab.Panel as={React.Fragment}>
+          <ScopeAndDemand fullScreen={fullScreen} />
+        </Tab.Panel>
+        <Tab.Panel as={React.Fragment}>
+          <CustomAnalytics
+            additionalParams={{
+              cycle: cycleDetails?.id,
+              module: moduleDetails?.id,
+            }}
+            fullScreen={fullScreen}
+          />
+        </Tab.Panel>
+      </Tab.Panels>
+    </Tab.Group>
+  );
+});
diff --git a/web/components/analytics/project-modal/modal.tsx b/web/components/analytics/project-modal/modal.tsx
new file mode 100644
index 000000000..d20861319
--- /dev/null
+++ b/web/components/analytics/project-modal/modal.tsx
@@ -0,0 +1,70 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { Dialog, Transition } from "@headlessui/react";
+
+// components
+import { ProjectAnalyticsModalHeader, ProjectAnalyticsModalMainContent } from "components/analytics";
+// types
+import { ICycle, IModule, IProject } from "types";
+
+type Props = {
+  isOpen: boolean;
+  onClose: () => void;
+  cycleDetails?: ICycle | undefined;
+  moduleDetails?: IModule | undefined;
+  projectDetails?: IProject | undefined;
+};
+
+export const ProjectAnalyticsModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, cycleDetails, moduleDetails, projectDetails } = props;
+
+  const [fullScreen, setFullScreen] = useState(false);
+
+  const handleClose = () => {
+    onClose();
+  };
+
+  return (
+    <Transition.Root appear show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+          <Transition.Child
+            as={React.Fragment}
+            enter="transition-transform duration-300"
+            enterFrom="translate-x-full"
+            enterTo="translate-x-0"
+            leave="transition-transform duration-200"
+            leaveFrom="translate-x-0"
+            leaveTo="translate-x-full"
+          >
+            {/* TODO: fix full screen mode */}
+            <Dialog.Panel
+              className={`fixed z-20 bg-custom-background-100 top-0 right-0 h-full shadow-custom-shadow-md ${
+                fullScreen ? "w-full p-2" : "w-1/2"
+              }`}
+            >
+              <div
+                className={`flex h-full flex-col overflow-hidden border-custom-border-200 bg-custom-background-100 text-left ${
+                  fullScreen ? "rounded-lg border" : "border-l"
+                }`}
+              >
+                <ProjectAnalyticsModalHeader
+                  fullScreen={fullScreen}
+                  handleClose={handleClose}
+                  setFullScreen={setFullScreen}
+                  title={cycleDetails?.name ?? moduleDetails?.name ?? projectDetails?.name ?? ""}
+                />
+                <ProjectAnalyticsModalMainContent
+                  fullScreen={fullScreen}
+                  cycleDetails={cycleDetails}
+                  moduleDetails={moduleDetails}
+                  projectDetails={projectDetails}
+                />
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+});
diff --git a/web/components/analytics/scope-and-demand/leaderboard.tsx b/web/components/analytics/scope-and-demand/leaderboard.tsx
index e52657c03..2562c9648 100644
--- a/web/components/analytics/scope-and-demand/leaderboard.tsx
+++ b/web/components/analytics/scope-and-demand/leaderboard.tsx
@@ -17,12 +17,7 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const AnalyticsLeaderboard: React.FC<Props> = ({
-  users,
-  title,
-  emptyStateMessage,
-  workspaceSlug,
-}) => (
+export const AnalyticsLeaderBoard: React.FC<Props> = ({ users, title, emptyStateMessage, workspaceSlug }) => (
   <div className="p-3 border border-custom-border-200 rounded-[10px]">
     <h6 className="text-base font-medium">{title}</h6>
     {users.length > 0 ? (
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 dc7e65515..0f9e2c712 100644
--- a/web/components/analytics/scope-and-demand/scope-and-demand.tsx
+++ b/web/components/analytics/scope-and-demand/scope-and-demand.tsx
@@ -3,16 +3,11 @@ 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";
+import { AnalyticsDemand, AnalyticsLeaderBoard, AnalyticsScope, AnalyticsYearWiseIssues } from "components/analytics";
 // ui
-import { Loader, PrimaryButton } from "components/ui";
+import { Button, Loader } from "@plane/ui";
 // fetch-keys
 import { DEFAULT_ANALYTICS } from "constants/fetch-keys";
 
@@ -20,7 +15,12 @@ type Props = {
   fullScreen?: boolean;
 };
 
-export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
+// services
+const analyticsService = new AnalyticsService();
+
+export const ScopeAndDemand: React.FC<Props> = (props) => {
+  const { fullScreen = true } = props;
+
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
@@ -40,9 +40,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
     mutate: mutateDefaultAnalytics,
   } = useSWR(
     workspaceSlug ? DEFAULT_ANALYTICS(workspaceSlug.toString(), params) : null,
-    workspaceSlug
-      ? () => analyticsService.getDefaultAnalytics(workspaceSlug.toString(), params)
-      : null
+    workspaceSlug ? () => analyticsService.getDefaultAnalytics(workspaceSlug.toString(), params) : null
   );
 
   return (
@@ -53,7 +51,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
             <div className={`grid grid-cols-1 gap-5 ${fullScreen ? "md:grid-cols-2" : ""}`}>
               <AnalyticsDemand defaultAnalytics={defaultAnalytics} />
               <AnalyticsScope defaultAnalytics={defaultAnalytics} />
-              <AnalyticsLeaderboard
+              <AnalyticsLeaderBoard
                 users={defaultAnalytics.most_issue_created_user?.map((user) => ({
                   avatar: user?.created_by__avatar,
                   firstName: user?.created_by__first_name,
@@ -63,10 +61,10 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
                   id: user?.created_by__id,
                 }))}
                 title="Most issues created"
-                emptyStateMessage="Co-workers and the number issues created by them appears here."
+                emptyStateMessage="Co-workers and the number of issues created by them appears here."
                 workspaceSlug={workspaceSlug?.toString() ?? ""}
               />
-              <AnalyticsLeaderboard
+              <AnalyticsLeaderBoard
                 users={defaultAnalytics.most_issue_closed_user?.map((user) => ({
                   avatar: user?.assignees__avatar,
                   firstName: user?.assignees__first_name,
@@ -76,7 +74,7 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
                   id: user?.assignees__id,
                 }))}
                 title="Most issues closed"
-                emptyStateMessage="Co-workers and the number issues closed by them appears here."
+                emptyStateMessage="Co-workers and the number of issues closed by them appears here."
                 workspaceSlug={workspaceSlug?.toString() ?? ""}
               />
               <div className={fullScreen ? "md:col-span-2" : ""}>
@@ -97,7 +95,9 @@ export const ScopeAndDemand: React.FC<Props> = ({ fullScreen = true }) => {
           <div className="space-y-4 text-custom-text-200">
             <p className="text-sm">There was some error in fetching the data.</p>
             <div className="flex items-center justify-center gap-2">
-              <PrimaryButton onClick={() => mutateDefaultAnalytics()}>Refresh</PrimaryButton>
+              <Button variant="primary" onClick={() => mutateDefaultAnalytics()}>
+                Refresh
+              </Button>
             </div>
           </div>
         </div>
diff --git a/web/components/analytics/scope-and-demand/year-wise-issues.tsx b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
index 87127ed60..7dedee31c 100644
--- a/web/components/analytics/scope-and-demand/year-wise-issues.tsx
+++ b/web/components/analytics/scope-and-demand/year-wise-issues.tsx
@@ -20,18 +20,15 @@ export const AnalyticsYearWiseIssues: React.FC<Props> = ({ defaultAnalytics }) =
           {
             id: "issues_closed",
             color: "rgb(var(--color-primary-100))",
-            data: MONTHS_LIST.map((month) => ({
-              x: month.label.substring(0, 3),
+            data: Object.entries(MONTHS_LIST).map(([index, month]) => ({
+              x: month.shortTitle,
               y:
-                defaultAnalytics.issue_completed_month_wise.find(
-                  (data) => data.month === month.value
-                )?.count || 0,
+                defaultAnalytics.issue_completed_month_wise.find((data) => data.month === parseInt(index, 10))?.count ||
+                0,
             })),
           },
         ]}
-        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map(
-          (data) => data.count
-        )}
+        customYAxisTickValues={defaultAnalytics.issue_completed_month_wise.map((data) => data.count)}
         height="300px"
         colors={(datum) => datum.color}
         curve="monotoneX"
diff --git a/web/components/auth-screens/project/join-project.tsx b/web/components/auth-screens/project/join-project.tsx
index 73b824b63..f67fca4a8 100644
--- a/web/components/auth-screens/project/join-project.tsx
+++ b/web/components/auth-screens/project/join-project.tsx
@@ -1,14 +1,11 @@
 import { useState } from "react";
-
 import Image from "next/image";
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { AssignmentClipboardIcon } from "components/icons";
 // images
@@ -16,6 +13,8 @@ import JoinProjectImg from "public/auth/project-not-authorized.svg";
 // fetch-keys
 import { USER_PROJECT_VIEW } from "constants/fetch-keys";
 
+const projectService = new ProjectService();
+
 export const JoinProject: React.FC = () => {
   const [isJoiningProject, setIsJoiningProject] = useState(false);
 
@@ -27,9 +26,7 @@ export const JoinProject: React.FC = () => {
 
     setIsJoiningProject(true);
     projectService
-      .joinProject(workspaceSlug as string, {
-        project_ids: [projectId as string],
-      })
+      .joinProject(workspaceSlug as string, [projectId as string])
       .then(async () => {
         await mutate(USER_PROJECT_VIEW(projectId.toString()));
         setIsJoiningProject(false);
@@ -45,25 +42,22 @@ export const JoinProject: React.FC = () => {
       <div className="h-44 w-72">
         <Image src={JoinProjectImg} height="176" width="288" alt="JoinProject" />
       </div>
-      <h1 className="text-xl font-medium text-custom-text-100">
-        You are not a member of this project
-      </h1>
+      <h1 className="text-xl font-medium text-custom-text-100">You are not a member of this project</h1>
 
       <div className="w-full max-w-md text-base text-custom-text-200">
         <p className="mx-auto w-full text-sm md:w-3/4">
-          You are not a member of this project, but you can join this project by clicking the button
-          below.
+          You are not a member of this project, but you can join this project by clicking the button below.
         </p>
       </div>
       <div>
-        <PrimaryButton
-          className="flex items-center gap-1"
+        <Button
+          variant="primary"
+          prependIcon={<AssignmentClipboardIcon color="white" />}
           loading={isJoiningProject}
           onClick={handleJoin}
         >
-          <AssignmentClipboardIcon height={16} width={16} color="white" />
           {isJoiningProject ? "Joining..." : "Click to join"}
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/auth-screens/workspace/not-a-member.tsx b/web/components/auth-screens/workspace/not-a-member.tsx
index ee63b5883..6737115a0 100644
--- a/web/components/auth-screens/workspace/not-a-member.tsx
+++ b/web/components/auth-screens/workspace/not-a-member.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 export const NotAWorkspaceMember = () => (
   <DefaultLayout>
@@ -12,19 +12,19 @@ export const NotAWorkspaceMember = () => (
         <div className="space-y-2">
           <h3 className="text-lg font-semibold">Not Authorized!</h3>
           <p className="mx-auto w-1/2 text-sm text-custom-text-200">
-            You{"'"}re not a member of this workspace. Please contact the workspace admin to get an
-            invitation or check your pending invitations.
+            You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or check
+            your pending invitations.
           </p>
         </div>
         <div className="flex items-center justify-center gap-2">
           <Link href="/invitations">
             <a>
-              <SecondaryButton>Check pending invites</SecondaryButton>
+              <Button variant="neutral-primary">Check pending invites</Button>
             </a>
           </Link>
           <Link href="/create-workspace">
             <a>
-              <PrimaryButton>Create new workspace</PrimaryButton>
+              <Button variant="primary">Create new workspace</Button>
             </a>
           </Link>
         </div>
diff --git a/web/components/automation/auto-archive-automation.tsx b/web/components/automation/auto-archive-automation.tsx
index 5aed7e852..eedf8a048 100644
--- a/web/components/automation/auto-archive-automation.tsx
+++ b/web/components/automation/auto-archive-automation.tsx
@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 
 // component
-import { CustomSelect, ToggleSwitch } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { ToggleSwitch } from "@plane/ui";
 import { SelectMonthModal } from "components/automation";
 // icon
 import { ArchiveRestore } from "lucide-react";
@@ -16,11 +17,7 @@ type Props = {
   disabled?: boolean;
 };
 
-export const AutoArchiveAutomation: React.FC<Props> = ({
-  projectDetails,
-  handleChange,
-  disabled = false,
-}) => {
+export const AutoArchiveAutomation: React.FC<Props> = ({ projectDetails, handleChange, disabled = false }) => {
   const [monthModal, setmonthModal] = useState(false);
 
   const initialValues: Partial<IProject> = { archive_in: 1 };
@@ -49,9 +46,7 @@ export const AutoArchiveAutomation: React.FC<Props> = ({
           <ToggleSwitch
             value={projectDetails?.archive_in !== 0}
             onChange={() =>
-              projectDetails?.archive_in === 0
-                ? handleChange({ archive_in: 1 })
-                : handleChange({ archive_in: 0 })
+              projectDetails?.archive_in === 0 ? handleChange({ archive_in: 1 }) : handleChange({ archive_in: 0 })
             }
             size="sm"
             disabled={disabled}
@@ -61,15 +56,11 @@ export const AutoArchiveAutomation: React.FC<Props> = ({
         {projectDetails?.archive_in !== 0 && (
           <div className="ml-12">
             <div className="flex items-center justify-between rounded px-5 py-4 bg-custom-background-90 border border-custom-border-200 gap-2 w-full">
-              <div className="w-1/2 text-sm font-medium">
-                Auto-archive issues that are closed for
-              </div>
+              <div className="w-1/2 text-sm font-medium">Auto-archive issues that are closed for</div>
               <div className="w-1/2">
                 <CustomSelect
                   value={projectDetails?.archive_in}
-                  label={`${projectDetails?.archive_in} ${
-                    projectDetails?.archive_in === 1 ? "Month" : "Months"
-                  }`}
+                  label={`${projectDetails?.archive_in} ${projectDetails?.archive_in === 1 ? "Month" : "Months"}`}
                   onChange={(val: number) => {
                     handleChange({ archive_in: val });
                   }}
diff --git a/web/components/automation/auto-close-automation.tsx b/web/components/automation/auto-close-automation.tsx
index 063501036..5231324f6 100644
--- a/web/components/automation/auto-close-automation.tsx
+++ b/web/components/automation/auto-close-automation.tsx
@@ -1,18 +1,16 @@
 import React, { useState } from "react";
-
 import useSWR from "swr";
-
 import { useRouter } from "next/router";
-
 // component
-import { CustomSearchSelect, CustomSelect, Icon, ToggleSwitch } from "components/ui";
+import { CustomSearchSelect, CustomSelect } from "components/ui";
 import { SelectMonthModal } from "components/automation";
+import { ToggleSwitch } from "@plane/ui";
 // icons
 import { Squares2X2Icon } from "@heroicons/react/24/outline";
 import { StateGroupIcon } from "components/icons";
 import { ArchiveX } from "lucide-react";
 // services
-import stateService from "services/state.service";
+import { ProjectStateService } from "services/project";
 // constants
 import { PROJECT_AUTOMATION_MONTHS } from "constants/project";
 import { STATES_LIST } from "constants/fetch-keys";
@@ -27,11 +25,9 @@ type Props = {
   disabled?: boolean;
 };
 
-export const AutoCloseAutomation: React.FC<Props> = ({
-  projectDetails,
-  handleChange,
-  disabled = false,
-}) => {
+const projectStateService = new ProjectStateService();
+
+export const AutoCloseAutomation: React.FC<Props> = ({ projectDetails, handleChange, disabled = false }) => {
   const [monthModal, setmonthModal] = useState(false);
 
   const router = useRouter();
@@ -40,7 +36,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({
   const { data: stateGroups } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      ? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
   const states = getStatesList(stateGroups);
@@ -62,9 +58,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({
 
   const defaultState = stateGroups && stateGroups.cancelled ? stateGroups.cancelled[0].id : null;
 
-  const selectedOption = states?.find(
-    (s) => s.id === projectDetails?.default_state ?? defaultState
-  );
+  const selectedOption = states?.find((s) => s.id === projectDetails?.default_state ?? defaultState);
   const currentDefaultState = states?.find((s) => s.id === defaultState);
 
   const initialValues: Partial<IProject> = {
@@ -111,15 +105,11 @@ export const AutoCloseAutomation: React.FC<Props> = ({
           <div className="ml-12">
             <div className="flex flex-col rounded bg-custom-background-90 border border-custom-border-200 p-2">
               <div className="flex items-center justify-between px-5 py-4 gap-2 w-full">
-                <div className="w-1/2 text-sm font-medium">
-                  Auto-close issues that are inactive for
-                </div>
+                <div className="w-1/2 text-sm font-medium">Auto-close issues that are inactive for</div>
                 <div className="w-1/2">
                   <CustomSelect
                     value={projectDetails?.close_in}
-                    label={`${projectDetails?.close_in} ${
-                      projectDetails?.close_in === 1 ? "Month" : "Months"
-                    }`}
+                    label={`${projectDetails?.close_in} ${projectDetails?.close_in === 1 ? "Month" : "Months"}`}
                     onChange={(val: number) => {
                       handleChange({ close_in: val });
                     }}
@@ -149,9 +139,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({
                 <div className="w-1/2 text-sm font-medium">Auto-close Status</div>
                 <div className="w-1/2 ">
                   <CustomSearchSelect
-                    value={
-                      projectDetails?.default_state ? projectDetails?.default_state : defaultState
-                    }
+                    value={projectDetails?.default_state ? projectDetails?.default_state : defaultState}
                     label={
                       <div className="flex items-center gap-2">
                         {selectedOption ? (
@@ -173,9 +161,7 @@ export const AutoCloseAutomation: React.FC<Props> = ({
                         )}
                         {selectedOption?.name
                           ? selectedOption.name
-                          : currentDefaultState?.name ?? (
-                              <span className="text-custom-text-200">State</span>
-                            )}
+                          : currentDefaultState?.name ?? <span className="text-custom-text-200">State</span>}
                       </div>
                     }
                     onChange={(val: string) => {
diff --git a/web/components/automation/select-month-modal.tsx b/web/components/automation/select-month-modal.tsx
index 18239d62b..88095b251 100644
--- a/web/components/automation/select-month-modal.tsx
+++ b/web/components/automation/select-month-modal.tsx
@@ -1,13 +1,11 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import type { IProject } from "types";
 
@@ -20,20 +18,14 @@ type Props = {
   handleChange: (formData: Partial<IProject>) => Promise<void>;
 };
 
-export const SelectMonthModal: React.FC<Props> = ({
-  type,
-  initialValues,
-  isOpen,
-  handleClose,
-  handleChange,
-}) => {
+export const SelectMonthModal: React.FC<Props> = ({ type, initialValues, isOpen, handleClose, handleChange }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
   } = useForm<IProject>({
     defaultValues: initialValues,
@@ -50,27 +42,6 @@ export const SelectMonthModal: React.FC<Props> = ({
     onClose();
   };
 
-  const inputSection = (name: string) => (
-    <div className="relative flex flex-col gap-1 justify-center w-full">
-      <Input
-        type="number"
-        id={name}
-        name={name}
-        placeholder="Enter Months"
-        autoComplete="off"
-        register={register}
-        width="full"
-        validations={{
-          required: "Select a month between 1 and 12.",
-          min: 1,
-          max: 12,
-        }}
-        className="border-custom-border-200"
-      />
-      <span className="absolute text-sm text-custom-text-200 top-2.5 right-8">Months</span>
-    </div>
-  );
-
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-30" onClose={onClose}>
@@ -100,30 +71,72 @@ export const SelectMonthModal: React.FC<Props> = ({
               <Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                       Customise Time Range
                     </Dialog.Title>
                     <div className="mt-8 flex items-center gap-2">
                       <div className="flex w-full flex-col gap-1 justify-center">
                         {type === "auto-close" ? (
                           <>
-                            {inputSection("close_in")}
+                            <Controller
+                              control={control}
+                              name="close_in"
+                              rules={{
+                                required: "Select a month between 1 and 12.",
+                                min: 1,
+                                max: 12,
+                              }}
+                              render={({ field: { value, onChange, ref } }) => (
+                                <div className="relative flex flex-col gap-1 justify-center w-full">
+                                  <Input
+                                    id="close_in"
+                                    name="close_in"
+                                    type="number"
+                                    value={value.toString()}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.close_in)}
+                                    placeholder="Enter Months"
+                                    className="border-custom-border-200 w-full"
+                                  />
+                                  <span className="absolute text-sm text-custom-text-200 top-2.5 right-8">Months</span>
+                                </div>
+                              )}
+                            />
+
                             {errors.close_in && (
-                              <span className="text-sm px-1 text-red-500">
-                                Select a month between 1 and 12.
-                              </span>
+                              <span className="text-sm px-1 text-red-500">Select a month between 1 and 12.</span>
                             )}
                           </>
                         ) : (
                           <>
-                            {inputSection("archive_in")}
+                            <Controller
+                              control={control}
+                              name="archive_in"
+                              rules={{
+                                required: "Select a month between 1 and 12.",
+                                min: 1,
+                                max: 12,
+                              }}
+                              render={({ field: { value, onChange, ref } }) => (
+                                <div className="relative flex flex-col gap-1 justify-center w-full">
+                                  <Input
+                                    id="archive_in"
+                                    name="archive_in"
+                                    type="number"
+                                    value={value.toString()}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.archive_in)}
+                                    placeholder="Enter Months"
+                                    className="border-custom-border-200 w-full"
+                                  />
+                                  <span className="absolute text-sm text-custom-text-200 top-2.5 right-8">Months</span>
+                                </div>
+                              )}
+                            />
                             {errors.archive_in && (
-                              <span className="text-sm px-1 text-red-500">
-                                Select a month between 1 and 12.
-                              </span>
+                              <span className="text-sm px-1 text-red-500">Select a month between 1 and 12.</span>
                             )}
                           </>
                         )}
@@ -131,10 +144,12 @@ export const SelectMonthModal: React.FC<Props> = ({
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Submitting..." : "Submit"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/command-palette/change-interface-theme.tsx b/web/components/command-palette/change-interface-theme.tsx
index 87d1289ae..1285eeb21 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 d20a44290..382acd19e 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/issues.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";
@@ -26,7 +26,8 @@ import {
   commandGroups,
 } from "components/command-palette";
 // ui
-import { Icon, Loader, ToggleSwitch, Tooltip } from "components/ui";
+import { Icon } from "components/ui";
+import { Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
 import { DiscordIcon, GithubIcon, SettingIcon } from "components/icons";
 import { InboxIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
@@ -43,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...");
 
@@ -79,16 +85,13 @@ 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
   );
 
   const { data: inboxList } = useSWR(
     workspaceSlug && projectId ? INBOX_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string) : null
   );
 
   const updateIssue = useCallback(
@@ -110,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));
@@ -272,8 +275,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                 >
                   {issueDetails && (
                     <div className="overflow-hidden truncate rounded-md bg-custom-background-80 p-2 text-xs font-medium text-custom-text-200">
-                      {issueDetails.project_detail.identifier}-{issueDetails.sequence_id}{" "}
-                      {issueDetails.name}
+                      {issueDetails.project_detail.identifier}-{issueDetails.sequence_id} {issueDetails.name}
                     </div>
                   )}
                   {projectId && (
@@ -324,12 +326,9 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                     </h5>
                   )}
 
-                  {!isLoading &&
-                    resultsCount === 0 &&
-                    searchTerm !== "" &&
-                    debouncedSearchTerm !== "" && (
-                      <div className="my-4 text-center text-custom-text-200">No results found.</div>
-                    )}
+                  {!isLoading && resultsCount === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                    <div className="my-4 text-center text-custom-text-200">No results found.</div>
+                  )}
 
                   {(isLoading || isSearching) && (
                     <Command.Loading>
@@ -362,9 +361,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                               >
                                 <div className="flex items-center gap-2 overflow-hidden text-custom-text-200">
                                   <Icon iconName={currentSection.icon} />
-                                  <p className="block flex-1 truncate">
-                                    {currentSection.itemName(item)}
-                                  </p>
+                                  <p className="block flex-1 truncate">{currentSection.itemName(item)}</p>
                                 </div>
                               </Command.Item>
                             ))}
@@ -577,9 +574,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                               <Command.Item
                                 onSelect={() => {
                                   setIsPaletteOpen(false);
-                                  redirect(
-                                    `/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`
-                                  );
+                                  redirect(`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`);
                                 }}
                                 className="focus:outline-none"
                               >
@@ -672,10 +667,7 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                         <Command.Item
                           onSelect={() => {
                             setIsPaletteOpen(false);
-                            window.open(
-                              "https://github.com/makeplane/plane/issues/new/choose",
-                              "_blank"
-                            );
+                            window.open("https://github.com/makeplane/plane/issues/new/choose", "_blank");
                           }}
                           className="focus:outline-none"
                         >
@@ -759,29 +751,15 @@ export const CommandK: React.FC<Props> = ({ deleteIssue, isPaletteOpen, setIsPal
                     </>
                   )}
                   {page === "change-issue-state" && issueDetails && (
-                    <ChangeIssueState
-                      issue={issueDetails}
-                      setIsPaletteOpen={setIsPaletteOpen}
-                      user={user}
-                    />
+                    <ChangeIssueState issue={issueDetails} setIsPaletteOpen={setIsPaletteOpen} user={user} />
                   )}
                   {page === "change-issue-priority" && issueDetails && (
-                    <ChangeIssuePriority
-                      issue={issueDetails}
-                      setIsPaletteOpen={setIsPaletteOpen}
-                      user={user}
-                    />
+                    <ChangeIssuePriority issue={issueDetails} setIsPaletteOpen={setIsPaletteOpen} user={user} />
                   )}
                   {page === "change-issue-assignee" && issueDetails && (
-                    <ChangeIssueAssignee
-                      issue={issueDetails}
-                      setIsPaletteOpen={setIsPaletteOpen}
-                      user={user}
-                    />
-                  )}
-                  {page === "change-interface-theme" && (
-                    <ChangeInterfaceTheme setIsPaletteOpen={setIsPaletteOpen} />
+                    <ChangeIssueAssignee issue={issueDetails} setIsPaletteOpen={setIsPaletteOpen} user={user} />
                   )}
+                  {page === "change-interface-theme" && <ChangeInterfaceTheme setIsPaletteOpen={setIsPaletteOpen} />}
                 </Command.List>
               </Command>
             </Dialog.Panel>
diff --git a/web/components/command-palette/command-pallette.tsx b/web/components/command-palette/command-pallette.tsx
index f183de9c6..3b90f2699 100644
--- a/web/components/command-palette/command-pallette.tsx
+++ b/web/components/command-palette/command-pallette.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
 // hooks
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
@@ -12,19 +12,19 @@ import { CreateUpdateCycleModal } from "components/cycles";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 import { CreateUpdateModuleModal } from "components/modules";
 import { CreateProjectModal } from "components/project";
-import { CreateUpdateViewModal } from "components/views";
+import { CreateUpdateProjectViewModal } from "components/views";
 import { CreateUpdatePageModal } from "components/pages";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // services
-import issuesService from "services/issues.service";
-import inboxService from "services/inbox.service";
+import { IssueService } from "services/issue";
 // fetch keys
-import { INBOX_LIST, ISSUE_DETAILS } from "constants/fetch-keys";
+import { ISSUE_DETAILS } from "constants/fetch-keys";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-import { observable } from "mobx";
-import { observer } from "mobx-react-lite";
+
+// services
+const issueService = new IssueService();
 
 export const CommandPalette: React.FC = observer(() => {
   const store: any = useMobxStore();
@@ -50,8 +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
   );
 
@@ -76,7 +75,7 @@ export const CommandPalette: React.FC = observer(() => {
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent) => {
-      const { key, ctrlKey, metaKey, altKey, shiftKey } = e;
+      const { key, ctrlKey, metaKey, altKey } = e;
       if (!key) return;
 
       const keyPressed = key.toLowerCase();
@@ -121,7 +120,7 @@ export const CommandPalette: React.FC = observer(() => {
         }
       }
     },
-    [copyIssueUrlToClipboard]
+    [copyIssueUrlToClipboard, store.theme]
   );
 
   useEffect(() => {
@@ -141,11 +140,7 @@ export const CommandPalette: React.FC = observer(() => {
     <>
       <ShortcutsModal isOpen={isShortcutsModalOpen} setIsOpen={setIsShortcutsModalOpen} />
       {workspaceSlug && (
-        <CreateProjectModal
-          isOpen={isProjectModalOpen}
-          setIsOpen={setIsProjectModalOpen}
-          user={user}
-        />
+        <CreateProjectModal isOpen={isProjectModalOpen} setIsOpen={setIsProjectModalOpen} user={user} />
       )}
       {projectId && (
         <>
@@ -159,10 +154,9 @@ export const CommandPalette: React.FC = observer(() => {
             setIsOpen={setIsCreateModuleModalOpen}
             user={user}
           />
-          <CreateUpdateViewModal
-            handleClose={() => setIsCreateViewModalOpen(false)}
+          <CreateUpdateProjectViewModal
             isOpen={isCreateViewModalOpen}
-            user={user}
+            onClose={() => setIsCreateViewModalOpen(false)}
           />
           <CreateUpdatePageModal
             isOpen={isCreateUpdatePageModalOpen}
@@ -184,11 +178,7 @@ export const CommandPalette: React.FC = observer(() => {
         handleClose={() => setIsIssueModalOpen(false)}
         fieldsToShow={inboxId ? ["name", "description", "priority"] : ["all"]}
         prePopulateData={
-          cycleId
-            ? { cycle: cycleId.toString() }
-            : moduleId
-            ? { module: moduleId.toString() }
-            : undefined
+          cycleId ? { cycle: cycleId.toString() } : moduleId ? { module: moduleId.toString() } : undefined
         }
       />
       <BulkDeleteIssuesModal
@@ -196,11 +186,7 @@ export const CommandPalette: React.FC = observer(() => {
         setIsOpen={setIsBulkDeleteIssuesModalOpen}
         user={user}
       />
-      <CommandK
-        deleteIssue={deleteIssue}
-        isPaletteOpen={isPaletteOpen}
-        setIsPaletteOpen={setIsPaletteOpen}
-      />
+      <CommandK deleteIssue={deleteIssue} isPaletteOpen={isPaletteOpen} setIsPaletteOpen={setIsPaletteOpen} />
     </>
   );
 });
diff --git a/web/components/command-palette/issue/change-issue-assignee.tsx b/web/components/command-palette/issue/change-issue-assignee.tsx
index ad3d4dfdb..dbab764d2 100644
--- a/web/components/command-palette/issue/change-issue-assignee.tsx
+++ b/web/components/command-palette/issue/change-issue-assignee.tsx
@@ -1,13 +1,9 @@
-import React, { Dispatch, SetStateAction, useCallback } from "react";
-
+import { Dispatch, SetStateAction, useCallback, FC } from "react";
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// cmdk
 import { Command } from "cmdk";
 // services
-import issuesService from "services/issues.service";
+import { IssueService } from "services/issue";
 // hooks
 import useProjectMembers from "hooks/use-project-members";
 // constants
@@ -17,22 +13,25 @@ import { Avatar } from "components/ui";
 // icons
 import { CheckIcon } from "components/icons";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
+import { IUser, IIssue } from "types";
 
 type Props = {
   setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
   issue: IIssue;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
-export const ChangeIssueAssignee: React.FC<Props> = ({ setIsPaletteOpen, issue, user }) => {
+// services
+const issueService = new IssueService();
+
+export const ChangeIssueAssignee: FC<Props> = ({ setIsPaletteOpen, issue, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
   const { members } = useProjectMembers(workspaceSlug as string, projectId as string);
 
   const options =
-    members?.map(({ member }) => ({
+    members?.map(({ member }: any) => ({
       value: member.id,
       query: member.display_name,
       content: (
@@ -67,7 +66,7 @@ export const ChangeIssueAssignee: 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));
@@ -94,7 +93,7 @@ export const ChangeIssueAssignee: React.FC<Props> = ({ setIsPaletteOpen, issue,
 
   return (
     <>
-      {options.map((option) => (
+      {options.map((option: any) => (
         <Command.Item
           key={option.value}
           onSelect={() => handleIssueAssignees(option.value)}
diff --git a/web/components/command-palette/issue/change-issue-priority.tsx b/web/components/command-palette/issue/change-issue-priority.tsx
index e1c0d52af..e38fb1b83 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/issues.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));
@@ -64,11 +67,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue,
   return (
     <>
       {PRIORITIES.map((priority) => (
-        <Command.Item
-          key={priority}
-          onSelect={() => handleIssueState(priority)}
-          className="focus:outline-none"
-        >
+        <Command.Item key={priority} onSelect={() => handleIssueState(priority)} className="focus:outline-none">
           <div className="flex items-center space-x-3">
             <PriorityIcon priority={priority} />
             <span className="capitalize">{priority ?? "None"}</span>
diff --git a/web/components/command-palette/issue/change-issue-state.tsx b/web/components/command-palette/issue/change-issue-state.tsx
index 6bfc2874c..0dfa23e6a 100644
--- a/web/components/command-palette/issue/change-issue-state.tsx
+++ b/web/components/command-palette/issue/change-issue-state.tsx
@@ -7,34 +7,36 @@ import useSWR, { mutate } from "swr";
 // cmdk
 import { Command } from "cmdk";
 // services
-import issuesService from "services/issues.service";
-import stateService from "services/state.service";
+import { IssueService } from "services/issue";
+import { ProjectStateService } from "services/project";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 // icons
 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;
 
   const { data: stateGroups, mutate: mutateIssueDetails } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
   );
   const states = getStatesList(stateGroups);
 
@@ -55,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();
@@ -78,18 +80,9 @@ export const ChangeIssueState: React.FC<Props> = ({ setIsPaletteOpen, issue, use
       {states ? (
         states.length > 0 ? (
           states.map((state) => (
-            <Command.Item
-              key={state.id}
-              onSelect={() => handleIssueState(state.id)}
-              className="focus:outline-none"
-            >
+            <Command.Item key={state.id} onSelect={() => handleIssueState(state.id)} className="focus:outline-none">
               <div className="flex items-center space-x-3">
-                <StateGroupIcon
-                  stateGroup={state.group}
-                  color={state.color}
-                  height="16px"
-                  width="16px"
-                />
+                <StateGroupIcon stateGroup={state.group} color={state.color} height="16px" width="16px" />
                 <p>{state.name}</p>
               </div>
               <div>{state.id === issue.state && <CheckIcon className="h-3 w-3" />}</div>
diff --git a/web/components/command-palette/shortcuts-modal.tsx b/web/components/command-palette/shortcuts-modal.tsx
index 82f9b398c..44f3d5442 100644
--- a/web/components/command-palette/shortcuts-modal.tsx
+++ b/web/components/command-palette/shortcuts-modal.tsx
@@ -6,7 +6,7 @@ import { XMarkIcon } from "@heroicons/react/20/solid";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { CommandIcon } from "components/icons";
 // ui
-import { Input } from "components/ui";
+import { Input } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -48,9 +48,7 @@ const allShortcuts = shortcuts.map((i) => i.shortcuts).flat(1);
 export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
   const [query, setQuery] = useState("");
   const filteredShortcuts = allShortcuts.filter((shortcut) =>
-    shortcut.description.toLowerCase().includes(query.trim().toLowerCase()) || query === ""
-      ? true
-      : false
+    shortcut.description.toLowerCase().includes(query.trim().toLowerCase()) || query === "" ? true : false
   );
 
   useEffect(() => {
@@ -105,12 +103,13 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                         <div className="flex w-full items-center justify-start gap-1 rounded border-[0.6px] border-custom-border-200 bg-custom-background-90 px-3 py-2">
                           <MagnifyingGlassIcon className="h-3.5 w-3.5 text-custom-text-200" />
                           <Input
-                            className="w-full  border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
                             id="search"
                             name="search"
                             type="text"
-                            placeholder="Search for shortcuts"
+                            value={query}
                             onChange={(e) => setQuery(e.target.value)}
+                            placeholder="Search for shortcuts"
+                            className="w-full border-none bg-transparent py-1 px-2 text-xs text-custom-text-200 focus:outline-none"
                           />
                         </div>
                       </div>
@@ -121,9 +120,7 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               <div key={shortcut.keys} className="flex w-full flex-col">
                                 <div className="flex flex-col gap-y-3">
                                   <div className="flex items-center justify-between">
-                                    <p className="text-sm text-custom-text-200">
-                                      {shortcut.description}
-                                    </p>
+                                    <p className="text-sm text-custom-text-200">{shortcut.description}</p>
                                     <div className="flex items-center gap-x-2.5">
                                       {shortcut.keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
diff --git a/web/components/ui/empty-state.tsx b/web/components/common/empty-state.tsx
similarity index 100%
rename from web/components/ui/empty-state.tsx
rename to web/components/common/empty-state.tsx
diff --git a/web/components/common/index.ts b/web/components/common/index.ts
new file mode 100644
index 000000000..57f8b6cca
--- /dev/null
+++ b/web/components/common/index.ts
@@ -0,0 +1,2 @@
+export * from "./product-updates-modal";
+export * from "./empty-state";
diff --git a/web/components/common/product-updates-modal.tsx b/web/components/common/product-updates-modal.tsx
new file mode 100644
index 000000000..f309b8303
--- /dev/null
+++ b/web/components/common/product-updates-modal.tsx
@@ -0,0 +1,115 @@
+import React from "react";
+
+import useSWR from "swr";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// components
+import { MarkdownRenderer } from "components/ui";
+import { Loader } from "@plane/ui";
+// icons
+import { XMarkIcon } from "@heroicons/react/20/solid";
+// helpers
+import { renderLongDateFormat } from "helpers/date-time.helper";
+
+type Props = {
+  isOpen: boolean;
+  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}>
+        <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 h-full w-full">
+          <div className="grid place-items-center h-full w-full p-4">
+            <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 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">
+                    <span>Product Updates</span>
+                    <span>
+                      <button type="button" onClick={() => setIsOpen(false)}>
+                        <XMarkIcon
+                          className="h-6 w-6 text-custom-text-200 hover:text-custom-text-100"
+                          aria-hidden="true"
+                        />
+                      </button>
+                    </span>
+                  </Dialog.Title>
+                  {updates && updates.length > 0 ? (
+                    <div className="h-full overflow-y-auto mt-4 space-y-4">
+                      {updates.map((item, index) => (
+                        <React.Fragment key={item.id}>
+                          <div className="flex items-center gap-3 text-xs text-custom-text-200">
+                            <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-background-90 px-3 py-1.5 text-xs">
+                              {item.tag_name}
+                            </span>
+                            <span>{renderLongDateFormat(item.published_at)}</span>
+                            {index === 0 && (
+                              <span className="flex items-center rounded-full border border-custom-border-200 bg-custom-primary px-3 py-1.5 text-xs text-white">
+                                New
+                              </span>
+                            )}
+                          </div>
+                          <MarkdownRenderer markdown={item.body} />
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="grid place-items-center w-full mt-4">
+                      <Loader className="space-y-6 w-full">
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                        <div className="space-y-3">
+                          <Loader.Item height="30px" />
+                          <Loader.Item height="20px" width="80%" />
+                          <Loader.Item height="20px" width="80%" />
+                        </div>
+                      </Loader>
+                    </div>
+                  )}
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};
diff --git a/web/components/core/activity.tsx b/web/components/core/activity.tsx
index d5987384c..affb2aa46 100644
--- a/web/components/core/activity.tsx
+++ b/web/components/core/activity.tsx
@@ -5,9 +5,10 @@ import useSWR from "swr";
 // hook
 import useEstimateOption from "hooks/use-estimate-option";
 // services
-import issuesService from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // icons
-import { Icon, Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
+import { Icon } from "components/ui";
 import {
   TagIcon,
   CopyPlus,
@@ -23,12 +24,7 @@ import {
   SignalMediumIcon,
   MessageSquareIcon,
 } from "lucide-react";
-import {
-  BlockedIcon,
-  BlockerIcon,
-  RelatedIcon,
-  StackedLayersHorizontalIcon,
-} from "components/icons";
+import { BlockedIcon, BlockerIcon, RelatedIcon, StackedLayersHorizontalIcon } from "components/icons";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter } from "helpers/string.helper";
@@ -37,25 +33,22 @@ 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;
 
   return (
-    <Tooltip
-      tooltipContent={
-        activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"
-      }
-    >
+    <Tooltip tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
       <a
         href={`/${workspaceSlug}/projects/${activity.project}/issues/${activity.issue}`}
         target="_blank"
         rel="noopener noreferrer"
         className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
       >
-        {activity.issue_detail
-          ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
-          : "Issue"}
+        {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}
         <RocketIcon size={12} color="#6b7280" />
       </a>
     </Tooltip>
@@ -84,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 (
@@ -103,20 +96,14 @@ const EstimatePoint = ({ point }: { point: string }) => {
 
   return (
     <span className="font-medium text-custom-text-100">
-      {isEstimateActive
-        ? estimateValue
-        : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
+      {isEstimateActive ? estimateValue : `${currentPoint} ${currentPoint > 1 ? "points" : "point"}`}
     </span>
   );
 };
 
 const activityDetails: {
   [key: string]: {
-    message: (
-      activity: IIssueActivity,
-      showIssue: boolean,
-      workspaceSlug: string
-    ) => React.ReactNode;
+    message: (activity: IIssueActivity, showIssue: boolean, workspaceSlug: string) => React.ReactNode;
     icon: React.ReactNode;
   };
 } = {
@@ -209,8 +196,7 @@ const activityDetails: {
       else
         return (
           <>
-            removed the blocking issue{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            removed the blocking issue <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
           </>
         );
     },
@@ -266,8 +252,7 @@ const activityDetails: {
       else
         return (
           <>
-            removed the relation from{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
+            removed the relation from <span className="font-medium text-custom-text-100">{activity.old_value}</span>.
           </>
         );
     },
@@ -554,8 +539,7 @@ const activityDetails: {
       if (!activity.new_value)
         return (
           <>
-            removed the parent{" "}
-            <span className="font-medium text-custom-text-100">{activity.old_value}</span>
+            removed the parent <span className="font-medium text-custom-text-100">{activity.old_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -568,8 +552,7 @@ const activityDetails: {
       else
         return (
           <>
-            set the parent to{" "}
-            <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+            set the parent to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
             {showIssue && (
               <>
                 {" "}
@@ -580,13 +563,7 @@ const activityDetails: {
           </>
         );
     },
-    icon: (
-      <Icon
-        iconName="supervised_user_circle"
-        className="!text-xs !text-[#6b7280]"
-        aria-hidden="true"
-      />
-    ),
+    icon: <Icon iconName="supervised_user_circle" className="!text-xs !text-[#6b7280]" aria-hidden="true" />,
   },
   priority: {
     message: (activity, showIssue) => (
@@ -643,8 +620,7 @@ const activityDetails: {
   state: {
     message: (activity, showIssue) => (
       <>
-        set the state to{" "}
-        <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        set the state to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
         {showIssue && (
           <>
             {" "}
@@ -696,13 +672,7 @@ export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
   <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>
 );
 
-export const ActivityMessage = ({
-  activity,
-  showIssue = false,
-}: {
-  activity: IIssueActivity;
-  showIssue?: boolean;
-}) => {
+export const ActivityMessage = ({ activity, showIssue = false }: { activity: IIssueActivity; showIssue?: boolean }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
diff --git a/web/components/core/filters/date-filter-modal.tsx b/web/components/core/filters/date-filter-modal.tsx
index eb285fd6f..a94dd809e 100644
--- a/web/components/core/filters/date-filter-modal.tsx
+++ b/web/components/core/filters/date-filter-modal.tsx
@@ -1,28 +1,22 @@
 import { Fragment } from "react";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// react-datepicker
 import DatePicker from "react-datepicker";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
+
 // components
 import { DateFilterSelect } from "./date-filter-select";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { XMarkIcon } from "@heroicons/react/20/solid";
 // helpers
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { IIssueFilterOptions } from "types";
 
 type Props = {
   title: string;
-  field: keyof IIssueFilterOptions;
-  filters: IIssueFilterOptions;
   handleClose: () => void;
   isOpen: boolean;
-  onSelect: (option: any) => void;
+  onSelect: (val: string[]) => void;
 };
 
 type TFormValues = {
@@ -37,14 +31,7 @@ const defaultValues: TFormValues = {
   date2: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()),
 };
 
-export const DateFilterModal: React.FC<Props> = ({
-  title,
-  field,
-  filters,
-  handleClose,
-  isOpen,
-  onSelect,
-}) => {
+export const DateFilterModal: React.FC<Props> = ({ title, handleClose, isOpen, onSelect }) => {
   const { handleSubmit, watch, control } = useForm<TFormValues>({
     defaultValues,
   });
@@ -52,32 +39,13 @@ export const DateFilterModal: React.FC<Props> = ({
   const handleFormSubmit = (formData: TFormValues) => {
     const { filterType, date1, date2 } = formData;
 
-    if (filterType === "range") {
-      onSelect({
-        key: field,
-        value: [`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`],
-      });
-    } else {
-      const filteredArray = (filters?.[field] as string[])?.filter((item) => {
-        if (item?.includes(filterType)) return false;
+    if (filterType === "range") onSelect([`${renderDateFormat(date1)};after`, `${renderDateFormat(date2)};before`]);
+    else onSelect([`${renderDateFormat(date1)};${filterType}`]);
 
-        return true;
-      });
-
-      const filterOne = filteredArray && filteredArray?.length > 0 ? filteredArray[0] : null;
-      if (filterOne)
-        onSelect({ key: field, value: [filterOne, `${renderDateFormat(date1)};${filterType}`] });
-      else
-        onSelect({
-          key: field,
-          value: [`${renderDateFormat(date1)};${filterType}`],
-        });
-    }
     handleClose();
   };
 
-  const isInvalid =
-    watch("filterType") === "range" ? new Date(watch("date1")) > new Date(watch("date2")) : false;
+  const isInvalid = watch("filterType") === "range" ? new Date(watch("date1")) > new Date(watch("date2")) : false;
 
   const nextDay = new Date(watch("date1"));
   nextDay.setDate(nextDay.getDate() + 1);
@@ -117,10 +85,7 @@ export const DateFilterModal: React.FC<Props> = ({
                         <DateFilterSelect title={title} value={value} onChange={onChange} />
                       )}
                     />
-                    <XMarkIcon
-                      className="border-base h-4 w-4 cursor-pointer"
-                      onClick={handleClose}
-                    />
+                    <XMarkIcon className="border-base h-4 w-4 cursor-pointer" onClick={handleClose} />
                   </div>
                   <div className="flex w-full justify-between gap-4">
                     <Controller
@@ -162,16 +127,12 @@ export const DateFilterModal: React.FC<Props> = ({
                     </h6>
                   )}
                   <div className="flex justify-end gap-4">
-                    <SecondaryButton className="flex items-center gap-2" onClick={handleClose}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
                       Cancel
-                    </SecondaryButton>
-                    <PrimaryButton
-                      type="submit"
-                      className="flex items-center gap-2"
-                      disabled={isInvalid}
-                    >
+                    </Button>
+                    <Button variant="primary" type="submit" disabled={isInvalid}>
                       Apply
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/core/filters/issues-view-filter.tsx b/web/components/core/filters/issues-view-filter.tsx
index 7df759e8a..91fd564fd 100644
--- a/web/components/core/filters/issues-view-filter.tsx
+++ b/web/components/core/filters/issues-view-filter.tsx
@@ -11,7 +11,8 @@ import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { SelectFilters } from "components/views";
 // ui
-import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import {
@@ -25,11 +26,11 @@ import {
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { Properties, TIssueViewOptions } from "types";
+import { Properties, TIssueLayouts } from "types";
 // constants
-import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
+import { ISSUE_GROUP_BY_OPTIONS, ISSUE_ORDER_BY_OPTIONS, ISSUE_FILTER_OPTIONS } from "constants/issue";
 
-const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
+const issueViewOptions: { type: TIssueLayouts; Icon: any }[] = [
   {
     type: "list",
     Icon: FormatListBulletedOutlined,
@@ -52,7 +53,7 @@ const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
   },
 ];
 
-const issueViewForDraftIssues: { type: TIssueViewOptions; Icon: any }[] = [
+const issueViewForDraftIssues: { type: TIssueLayouts; Icon: any }[] = [
   {
     type: "list",
     Icon: FormatListBulletedOutlined,
@@ -69,19 +70,10 @@ export const IssuesFilterView: React.FC = () => {
   const isArchivedIssues = router.pathname.includes("archived-issues");
   const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
 
-  const {
-    displayFilters,
-    setDisplayFilters,
-    filters,
-    setFilters,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-  } = useIssuesView();
+  const { displayFilters, setDisplayFilters, filters, setFilters, resetFilterToDefault, setNewFilterDefaultView } =
+    useIssuesView();
 
-  const [properties, setProperties] = useIssuesProperties(
-    workspaceSlug as string,
-    projectId as string
-  );
+  const [properties, setProperties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
   const { isEstimateActive } = useEstimateOption();
 
@@ -92,11 +84,7 @@ export const IssuesFilterView: React.FC = () => {
           {issueViewOptions.map((option) => (
             <Tooltip
               key={option.type}
-              tooltipContent={
-                <span className="capitalize">
-                  {replaceUnderscoreIfSnakeCase(option.type)} Layout
-                </span>
-              }
+              tooltipContent={<span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</span>}
               position="bottom"
             >
               <button
@@ -124,9 +112,7 @@ export const IssuesFilterView: React.FC = () => {
           {issueViewForDraftIssues.map((option) => (
             <Tooltip
               key={option.type}
-              tooltipContent={
-                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
-              }
+              tooltipContent={<span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>}
               position="bottom"
             >
               <button
@@ -166,9 +152,7 @@ export const IssuesFilterView: React.FC = () => {
             if (valueExists)
               setFilters(
                 {
-                  [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                    (val) => val !== option.value
-                  ),
+                  [option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value),
                 },
                 !Boolean(viewId)
               );
@@ -189,9 +173,7 @@ export const IssuesFilterView: React.FC = () => {
           <>
             <Popover.Button
               className={`group flex items-center gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
-                open
-                  ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
-                  : "text-custom-sidebar-text-200"
+                open ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100" : "text-custom-sidebar-text-200"
               }`}
             >
               Display
@@ -218,27 +200,24 @@ export const IssuesFilterView: React.FC = () => {
                           <div className="w-28">
                             <CustomMenu
                               label={
-                                GROUP_BY_OPTIONS.find(
-                                  (option) => option.key === displayFilters.group_by
-                                )?.name ?? "Select"
+                                ISSUE_GROUP_BY_OPTIONS.find((option) => option.key === displayFilters.group_by)
+                                  ?.title ?? "Select"
                               }
                               className="!w-full"
                               buttonClassName="w-full"
                             >
-                              {GROUP_BY_OPTIONS.map((option) => {
-                                if (displayFilters.layout === "kanban" && option.key === null)
-                                  return null;
+                              {ISSUE_GROUP_BY_OPTIONS.map((option) => {
+                                if (displayFilters.layout === "kanban" && option.key === null) return null;
                                 if (option.key === "project") return null;
 
-                                if (isDraftIssues && option.key === "state_detail.group")
-                                  return null;
+                                if (isDraftIssues && option.key === "state_detail.group") return null;
 
                                 return (
                                   <CustomMenu.MenuItem
                                     key={option.key}
                                     onClick={() => setDisplayFilters({ group_by: option.key })}
                                   >
-                                    {option.name}
+                                    {option.title}
                                   </CustomMenu.MenuItem>
                                 );
                               })}
@@ -246,51 +225,47 @@ export const IssuesFilterView: React.FC = () => {
                           </div>
                         </div>
                       )}
-                    {displayFilters.layout !== "calendar" &&
-                      displayFilters.layout !== "spreadsheet" && (
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Order by</h4>
-                          <div className="w-28">
-                            <CustomMenu
-                              label={
-                                ORDER_BY_OPTIONS.find(
-                                  (option) => option.key === displayFilters.order_by
-                                )?.name ?? "Select"
-                              }
-                              className="!w-full"
-                              buttonClassName="w-full"
-                            >
-                              {ORDER_BY_OPTIONS.map((option) =>
-                                displayFilters.group_by === "priority" &&
-                                option.key === "priority" ? null : (
-                                  <CustomMenu.MenuItem
-                                    key={option.key}
-                                    onClick={() => {
-                                      setDisplayFilters({ order_by: option.key });
-                                    }}
-                                  >
-                                    {option.name}
-                                  </CustomMenu.MenuItem>
-                                )
-                              )}
-                            </CustomMenu>
-                          </div>
+                    {displayFilters.layout !== "calendar" && displayFilters.layout !== "spreadsheet" && (
+                      <div className="flex items-center justify-between">
+                        <h4 className="text-custom-text-200">Order by</h4>
+                        <div className="w-28">
+                          <CustomMenu
+                            label={
+                              ISSUE_ORDER_BY_OPTIONS.find((option) => option.key === displayFilters.order_by)?.title ??
+                              "Select"
+                            }
+                            className="!w-full"
+                            buttonClassName="w-full"
+                          >
+                            {ISSUE_ORDER_BY_OPTIONS.map((option) =>
+                              displayFilters.group_by === "priority" && option.key === "priority" ? null : (
+                                <CustomMenu.MenuItem
+                                  key={option.key}
+                                  onClick={() => {
+                                    setDisplayFilters({ order_by: option.key });
+                                  }}
+                                >
+                                  {option.title}
+                                </CustomMenu.MenuItem>
+                              )
+                            )}
+                          </CustomMenu>
                         </div>
-                      )}
+                      </div>
+                    )}
                     {!isArchivedIssues && (
                       <div className="flex items-center justify-between">
                         <h4 className="text-custom-text-200">Issue type</h4>
                         <div className="w-28">
                           <CustomMenu
                             label={
-                              FILTER_ISSUE_OPTIONS.find(
-                                (option) => option.key === displayFilters.type
-                              )?.name ?? "Select"
+                              ISSUE_FILTER_OPTIONS.find((option) => option.key === displayFilters.type)?.title ??
+                              "Select"
                             }
                             className="!w-full"
                             buttonClassName="w-full"
                           >
-                            {FILTER_ISSUE_OPTIONS.map((option) => (
+                            {ISSUE_FILTER_OPTIONS.map((option) => (
                               <CustomMenu.MenuItem
                                 key={option.key}
                                 onClick={() =>
@@ -299,7 +274,7 @@ export const IssuesFilterView: React.FC = () => {
                                   })
                                 }
                               >
-                                {option.name}
+                                {option.title}
                               </CustomMenu.MenuItem>
                             ))}
                           </CustomMenu>
@@ -307,20 +282,17 @@ export const IssuesFilterView: React.FC = () => {
                       </div>
                     )}
 
-                    {displayFilters.layout !== "calendar" &&
-                      displayFilters.layout !== "spreadsheet" && (
-                        <div className="flex items-center justify-between">
-                          <h4 className="text-custom-text-200">Show sub-issues</h4>
-                          <div className="w-28">
-                            <ToggleSwitch
-                              value={displayFilters.sub_issue ?? true}
-                              onChange={() =>
-                                setDisplayFilters({ sub_issue: !displayFilters.sub_issue })
-                              }
-                            />
-                          </div>
+                    {displayFilters.layout !== "calendar" && displayFilters.layout !== "spreadsheet" && (
+                      <div className="flex items-center justify-between">
+                        <h4 className="text-custom-text-200">Show sub-issues</h4>
+                        <div className="w-28">
+                          <ToggleSwitch
+                            value={displayFilters.sub_issue ?? true}
+                            onChange={() => setDisplayFilters({ sub_issue: !displayFilters.sub_issue })}
+                          />
                         </div>
-                      )}
+                      </div>
+                    )}
                     {displayFilters.layout !== "calendar" &&
                       displayFilters.layout !== "spreadsheet" &&
                       displayFilters.layout !== "gantt_chart" && (
@@ -365,16 +337,11 @@ export const IssuesFilterView: React.FC = () => {
 
                           if (
                             displayFilters.layout === "spreadsheet" &&
-                            (key === "attachment_count" ||
-                              key === "link" ||
-                              key === "sub_issue_count")
+                            (key === "attachment_count" || key === "link" || key === "sub_issue_count")
                           )
                             return null;
 
-                          if (
-                            displayFilters.layout !== "spreadsheet" &&
-                            (key === "created_on" || key === "updated_on")
-                          )
+                          if (displayFilters.layout !== "spreadsheet" && (key === "created_on" || key === "updated_on"))
                             return null;
 
                           return (
diff --git a/web/components/core/filters/workspace-filters-list.tsx b/web/components/core/filters/workspace-filters-list.tsx
index 0b31ae7f5..10ffeec07 100644
--- a/web/components/core/filters/workspace-filters-list.tsx
+++ b/web/components/core/filters/workspace-filters-list.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-
+import { FC } from "react";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { PriorityIcon, StateGroupIcon } from "components/icons";
@@ -10,13 +9,7 @@ import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import {
-  IIssueLabels,
-  IProject,
-  IUserLite,
-  IWorkspaceIssueFilterOptions,
-  TStateGroups,
-} from "types";
+import { IIssueLabels, IProject, IUserLite, IWorkspaceIssueFilterOptions, TStateGroups } from "types";
 // constants
 import { STATE_GROUP_COLORS } from "constants/state";
 
@@ -30,20 +23,12 @@ type Props = {
   project?: IProject[] | undefined;
 };
 
-export const WorkspaceFiltersList: React.FC<Props> = ({
-  filters,
-  setFilters,
-  clearAllFilters,
-  labels,
-  members,
-  stateGroup,
-  project,
-}) => {
+export const WorkspaceFiltersList: FC<Props> = (props) => {
+  const { filters, setFilters, clearAllFilters, labels, members, project } = props;
+
   if (!filters) return <></>;
 
-  const nullFilters = Object.keys(filters).filter(
-    (key) => filters[key as keyof IWorkspaceIssueFilterOptions] === null
-  );
+  const nullFilters = Object.keys(filters).filter((key) => filters[key as keyof IWorkspaceIssueFilterOptions] === null);
 
   return (
     <div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
@@ -189,9 +174,7 @@ export const WorkspaceFiltersList: React.FC<Props> = ({
                               className="cursor-pointer"
                               onClick={() =>
                                 setFilters({
-                                  created_by: filters.created_by?.filter(
-                                    (p: any) => p !== memberId
-                                  ),
+                                  created_by: filters.created_by?.filter((p: any) => p !== memberId),
                                 })
                               }
                             >
diff --git a/web/components/core/image-picker-popover.tsx b/web/components/core/image-picker-popover.tsx
index cfe18cd97..9b6addbb5 100644
--- a/web/components/core/image-picker-popover.tsx
+++ b/web/components/core/image-picker-popover.tsx
@@ -4,14 +4,14 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 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";
 // components
-import { Input, PrimaryButton, SecondaryButton, Loader } from "components/ui";
+import { Button, Input, Loader } from "@plane/ui";
 
 const tabOptions = [
   {
@@ -31,16 +31,15 @@ const tabOptions = [
 type Props = {
   label: string | React.ReactNode;
   value: string | null;
+  control: Control<any>;
   onChange: (data: string) => void;
   disabled?: boolean;
 };
 
-export const ImagePickerPopover: React.FC<Props> = ({
-  label,
-  value,
-  onChange,
-  disabled = false,
-}) => {
+// services
+const fileService = new FileService();
+
+export const ImagePickerPopover: React.FC<Props> = ({ label, value, control, onChange, disabled = false }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const router = useRouter();
@@ -64,14 +63,10 @@ export const ImagePickerPopover: React.FC<Props> = ({
     }
   );
 
-  const { data: projectCoverImages } = useSWR(
-    `PROJECT_COVER_IMAGES`,
-    () => fileService.getProjectCoverImages(),
-    {
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-    }
-  );
+  const { data: projectCoverImages } = useSWR(`PROJECT_COVER_IMAGES`, () => fileService.getProjectCoverImages(), {
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+  });
 
   const imagePickerRef = useRef<HTMLDivElement>(null);
 
@@ -154,8 +149,7 @@ export const ImagePickerPopover: React.FC<Props> = ({
               <Tab.List as="span" className="inline-block rounded bg-custom-background-80 p-1">
                 {tabOptions.map((tab) => {
                   if (!unsplashImages && unsplashError && tab.key === "unsplash") return null;
-                  if (projectCoverImages && projectCoverImages.length === 0 && tab.key === "images")
-                    return null;
+                  if (projectCoverImages && projectCoverImages.length === 0 && tab.key === "images") return null;
 
                   return (
                     <Tab
@@ -175,17 +169,25 @@ export const ImagePickerPopover: React.FC<Props> = ({
                 {(unsplashImages || !unsplashError) && (
                   <Tab.Panel className="h-full w-full space-y-4 mt-4">
                     <div className="flex gap-x-2">
-                      <Input
+                      <Controller
+                        control={control}
                         name="search"
-                        className="text-sm"
-                        id="search"
-                        value={formData.search}
-                        onChange={(e) => setFormData({ ...formData, search: e.target.value })}
-                        placeholder="Search for images"
+                        render={({ field: { value, ref } }) => (
+                          <Input
+                            id="search"
+                            name="search"
+                            type="text"
+                            value={value}
+                            onChange={(e) => setFormData({ ...formData, search: e.target.value })}
+                            ref={ref}
+                            placeholder="Search for images"
+                            className="text-sm w-full"
+                          />
+                        )}
                       />
-                      <PrimaryButton onClick={() => setSearchParams(formData.search)} size="sm">
+                      <Button variant="primary" onClick={() => setSearchParams(formData.search)} size="sm">
                         Search
-                      </PrimaryButton>
+                      </Button>
                     </div>
                     {unsplashImages ? (
                       unsplashImages.length > 0 ? (
@@ -208,9 +210,7 @@ export const ImagePickerPopover: React.FC<Props> = ({
                           ))}
                         </div>
                       ) : (
-                        <p className="text-center text-custom-text-300 text-xs pt-7">
-                          No images found.
-                        </p>
+                        <p className="text-center text-custom-text-300 text-xs pt-7">No images found.</p>
                       )
                     ) : (
                       <Loader className="grid grid-cols-4 gap-4">
@@ -249,9 +249,7 @@ export const ImagePickerPopover: React.FC<Props> = ({
                           ))}
                         </div>
                       ) : (
-                        <p className="text-center text-custom-text-300 text-xs pt-7">
-                          No images found.
-                        </p>
+                        <p className="text-center text-custom-text-300 text-xs pt-7">No images found.</p>
                       )
                     ) : (
                       <Loader className="grid grid-cols-4 gap-4 pt-4">
@@ -297,9 +295,7 @@ export const ImagePickerPopover: React.FC<Props> = ({
                         ) : (
                           <div>
                             <span className="mt-2 block text-sm font-medium text-custom-text-200">
-                              {isDragActive
-                                ? "Drop image here to upload"
-                                : "Drag & drop image here"}
+                              {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
                             </span>
                           </div>
                         )}
@@ -320,23 +316,24 @@ export const ImagePickerPopover: React.FC<Props> = ({
                     </p>
 
                     <div className="flex items-center justify-end gap-2">
-                      <SecondaryButton
-                        className="w-full"
+                      <Button
+                        variant="neutral-primary"
                         onClick={() => {
                           setIsOpen(false);
                           setImage(null);
                         }}
                       >
                         Cancel
-                      </SecondaryButton>
-                      <PrimaryButton
+                      </Button>
+                      <Button
+                        variant="primary"
                         className="w-full"
                         onClick={handleSubmit}
                         disabled={!image}
                         loading={isImageUploading}
                       >
                         {isImageUploading ? "Uploading..." : "Upload & Save"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </div>
                 </Tab.Panel>
diff --git a/web/components/core/modals/bulk-delete-issues-modal.tsx b/web/components/core/modals/bulk-delete-issues-modal.tsx
index 375e155a4..a751657c6 100644
--- a/web/components/core/modals/bulk-delete-issues-modal.tsx
+++ b/web/components/core/modals/bulk-delete-issues-modal.tsx
@@ -1,26 +1,22 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
 // react hook form
 import { SubmitHandler, useForm } from "react-hook-form";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import issuesServices from "services/issues.service";
+import { IssueService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
+import { IUser, IIssue } from "types";
 // fetch keys
 import {
   CYCLE_DETAILS,
@@ -39,9 +35,11 @@ type FormInput = {
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+const issueService = new IssueService();
+
 export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user }) => {
   const [query, setQuery] = useState("");
 
@@ -49,17 +47,13 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
   const { data: issues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
-    workspaceSlug && projectId
-      ? () => issuesServices.getIssues(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null,
+    workspaceSlug && projectId ? () => issueService.getIssues(workspaceSlug as string, projectId as string) : null
   );
 
   const { setToastAlert } = useToast();
   const { displayFilters, params } = useIssuesView();
-  const { params: calendarParams } = useCalendarIssuesView();
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { order_by, group_by, ...viewGanttParams } = params;
 
   const {
@@ -94,14 +88,6 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
 
     if (!Array.isArray(data.delete_issue_ids)) data.delete_issue_ids = [data.delete_issue_ids];
 
-    const calendarFetchKey = cycleId
-      ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
-      : moduleId
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
-      : viewId
-      ? VIEW_ISSUES(viewId.toString(), calendarParams)
-      : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", calendarParams);
-
     const ganttFetchKey = cycleId
       ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
       : moduleId
@@ -110,7 +96,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
       ? VIEW_ISSUES(viewId.toString(), viewGanttParams)
       : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "");
 
-    await issuesServices
+    await issueService
       .bulkDeleteIssues(
         workspaceSlug as string,
         projectId as string,
@@ -126,8 +112,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
           message: "Issues deleted successfully!",
         });
 
-        if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
-        else if (displayFilters.layout === "gantt_chart") mutate(ganttFetchKey);
+        if (displayFilters.layout === "gantt_chart") mutate(ganttFetchKey);
         else {
           if (cycleId) {
             mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), params));
@@ -155,9 +140,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
       : issues?.filter(
           (issue) =>
             issue.name.toLowerCase().includes(query.toLowerCase()) ||
-            `${issue.project_detail.identifier}-${issue.sequence_id}`
-              .toLowerCase()
-              .includes(query.toLowerCase())
+            `${issue.project_detail.identifier}-${issue.sequence_id}`.toLowerCase().includes(query.toLowerCase())
         ) ?? [];
 
   return (
@@ -216,7 +199,7 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
                               key={issue.id}
                               as="div"
                               value={issue.id}
-                              className={({ active, selected }) =>
+                              className={({ active }) =>
                                 `flex cursor-pointer select-none items-center justify-between rounded-md px-3 py-2 ${
                                   active ? "bg-custom-background-80 text-custom-text-100" : ""
                                 }`
@@ -257,10 +240,12 @@ export const BulkDeleteIssuesModal: React.FC<Props> = ({ isOpen, setIsOpen, user
 
                 {filteredIssues.length > 0 && (
                   <div className="flex items-center justify-end gap-2 p-3">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleSubmit(handleDelete)} loading={isSubmitting}>
                       {isSubmitting ? "Deleting..." : "Delete selected issues"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 )}
               </form>
diff --git a/web/components/core/modals/existing-issues-list-modal.tsx b/web/components/core/modals/existing-issues-list-modal.tsx
index ed3902a4a..57231f241 100644
--- a/web/components/core/modals/existing-issues-list-modal.tsx
+++ b/web/components/core/modals/existing-issues-list-modal.tsx
@@ -7,13 +7,13 @@ import { mutate } from "swr";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
 import useDebounce from "hooks/use-debounce";
 // ui
-import { Loader, PrimaryButton, SecondaryButton, ToggleSwitch, Tooltip } from "components/ui";
+import { Button, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
 import { LaunchOutlined } from "@mui/icons-material";
 import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/outline";
@@ -36,6 +36,8 @@ type Props = {
   workspaceLevelToggle?: boolean;
 };
 
+const projectService = new ProjectService();
+
 export const ExistingIssuesListModal: React.FC<Props> = ({
   isOpen,
   handleClose: onClose,
@@ -117,12 +119,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
 
   return (
     <>
-      <Transition.Root
-        show={isOpen}
-        as={React.Fragment}
-        afterLeave={() => setSearchTerm("")}
-        appear
-      >
+      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
         <Dialog as="div" className="relative z-20" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
@@ -180,11 +177,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                             <button
                               type="button"
                               className="group p-1"
-                              onClick={() =>
-                                setSelectedIssues((prevData) =>
-                                  prevData.filter((i) => i.id !== issue.id)
-                                )
-                              }
+                              onClick={() => setSelectedIssues((prevData) => prevData.filter((i) => i.id !== issue.id))}
                             >
                               <XMarkIcon className="h-3 w-3 text-custom-text-200 group-hover:text-custom-text-100" />
                             </button>
@@ -232,21 +225,15 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                       </h5>
                     )}
 
-                    {!isSearching &&
-                      issues.length === 0 &&
-                      searchTerm !== "" &&
-                      debouncedSearchTerm !== "" && (
-                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="52" width="52" />
-                          <h3 className="text-custom-text-200">
-                            No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">
-                              C
-                            </pre>
-                            .
-                          </h3>
-                        </div>
-                      )}
+                    {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                      <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                        <LayerDiagonalIcon height="52" width="52" />
+                        <h3 className="text-custom-text-200">
+                          No issues found. Create a new issue with{" "}
+                          <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
+                        </h3>
+                      </div>
+                    )}
 
                     {isSearching ? (
                       <Loader className="space-y-3 p-3">
@@ -256,9 +243,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                         <Loader.Item height="40px" />
                       </Loader>
                     ) : (
-                      <ul
-                        className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}
-                      >
+                      <ul className={`text-sm text-custom-text-100 ${issues.length > 0 ? "p-2" : ""}`}>
                         {issues.map((issue) => {
                           const selected = selectedIssues.some((i) => i.id === issue.id);
 
@@ -309,10 +294,12 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                 </Combobox>
                 {selectedIssues.length > 0 && (
                   <div className="flex items-center justify-end gap-2 p-3">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={onSubmit} loading={isSubmitting}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={onSubmit} loading={isSubmitting}>
                       {isSubmitting ? "Adding..." : "Add selected issues"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 )}
               </Dialog.Panel>
diff --git a/web/components/core/modals/gpt-assistant-modal.tsx b/web/components/core/modals/gpt-assistant-modal.tsx
index 65495805a..672fc9a05 100644
--- a/web/components/core/modals/gpt-assistant-modal.tsx
+++ b/web/components/core/modals/gpt-assistant-modal.tsx
@@ -1,15 +1,15 @@
 import React, { useEffect, useState, useRef } from "react";
 import { useRouter } from "next/router";
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // services
-import aiService from "services/ai.service";
-import trackEventServices 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";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // components
 import { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "@plane/rich-text-editor";
 // types
@@ -32,6 +32,10 @@ type FormData = {
   task: string;
 };
 
+// services
+const aiService = new AIService();
+const trackEventService = new TrackEventService();
+
 export const GptAssistantModal: React.FC<Props> = ({
   isOpen,
   handleClose,
@@ -57,7 +61,7 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   const {
     handleSubmit,
-    register,
+    control,
     reset,
     setFocus,
     formState: { isSubmitting },
@@ -111,9 +115,7 @@ export const GptAssistantModal: React.FC<Props> = ({
           setToastAlert({
             type: "error",
             title: "Error!",
-            message:
-              error ||
-              "You have reached the maximum number of requests of 50 requests per month per user.",
+            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
           });
         else
           setToastAlert({
@@ -134,8 +136,9 @@ export const GptAssistantModal: React.FC<Props> = ({
 
   return (
     <div
-      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${isOpen ? "block" : "hidden"
-        }`}
+      className={`absolute ${inset} z-20 w-full space-y-4 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-4 shadow ${
+        isOpen ? "block" : "hidden"
+      }`}
     >
       {((content && content !== "") || (htmlContent && htmlContent !== "<p></p>")) && (
         <div className="text-sm">
@@ -162,56 +165,50 @@ export const GptAssistantModal: React.FC<Props> = ({
       )}
       {invalidResponse && (
         <div className="text-sm text-red-500">
-          No response could be generated. This may be due to insufficient content or task
-          information. Please try again.
+          No response could be generated. This may be due to insufficient content or task information. Please try again.
         </div>
       )}
-      <Input
-        type="text"
+      <Controller
+        control={control}
         name="task"
-        register={register}
-        placeholder={`${content && content !== ""
-          ? "Tell AI what action to perform on this content..."
-          : "Ask AI anything..."
-          }`}
-        autoComplete="off"
+        render={({ field: { value, onChange, ref } }) => (
+          <Input
+            id="task"
+            name="task"
+            type="text"
+            value={value}
+            onChange={onChange}
+            ref={ref}
+            placeholder={`${
+              content && content !== "" ? "Tell AI what action to perform on this content..." : "Ask AI anything..."
+            }`}
+            className="w-full"
+          />
+        )}
       />
       <div className={`flex gap-2 ${response === "" ? "justify-end" : "justify-between"}`}>
         {response !== "" && (
-          <PrimaryButton
+          <Button
+            variant="primary"
             onClick={() => {
               onResponse(response);
               onClose();
-              if (block)
-                trackEventServices.trackUseGPTResponseEvent(
-                  block,
-                  "USE_GPT_RESPONSE_IN_PAGE_BLOCK",
-                  user
-                );
-              else if (issue)
-                trackEventServices.trackUseGPTResponseEvent(
-                  issue,
-                  "USE_GPT_RESPONSE_IN_ISSUE",
-                  user
-                );
+              if (block && user)
+                trackEventService.trackUseGPTResponseEvent(block, "USE_GPT_RESPONSE_IN_PAGE_BLOCK", user);
+              else if (issue && user)
+                trackEventService.trackUseGPTResponseEvent(issue, "USE_GPT_RESPONSE_IN_ISSUE", user);
             }}
           >
             Use this response
-          </PrimaryButton>
+          </Button>
         )}
         <div className="flex items-center gap-2">
-          <SecondaryButton onClick={onClose}>Close</SecondaryButton>
-          <PrimaryButton
-            type="button"
-            onClick={handleSubmit(handleResponse)}
-            loading={isSubmitting}
-          >
-            {isSubmitting
-              ? "Generating response..."
-              : response === ""
-                ? "Generate response"
-                : "Generate again"}
-          </PrimaryButton>
+          <Button variant="neutral-primary" onClick={onClose}>
+            Close
+          </Button>
+          <Button variant="primary" onClick={handleSubmit(handleResponse)} loading={isSubmitting}>
+            {isSubmitting ? "Generating response..." : response === "" ? "Generate response" : "Generate again"}
+          </Button>
         </div>
       </div>
     </div>
diff --git a/web/components/core/modals/image-upload-modal.tsx b/web/components/core/modals/image-upload-modal.tsx
index e1795ed04..84f4b03b6 100644
--- a/web/components/core/modals/image-upload-modal.tsx
+++ b/web/components/core/modals/image-upload-modal.tsx
@@ -7,11 +7,11 @@ 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
-import { DangerButton, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { UserCircleIcon } from "components/icons";
 
@@ -25,6 +25,9 @@ type Props = {
   userImage?: boolean;
 };
 
+// services
+const fileService = new FileService();
+
 export const ImageUploadModal: React.FC<Props> = ({
   value,
   onSuccess,
@@ -127,10 +130,7 @@ export const ImageUploadModal: React.FC<Props> = ({
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-custom-text-100"
-                  >
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                     Upload Image
                   </Dialog.Title>
                   <div className="space-y-3">
@@ -161,9 +161,7 @@ export const ImageUploadModal: React.FC<Props> = ({
                           <div>
                             <UserCircleIcon className="mx-auto h-16 w-16 text-custom-text-200" />
                             <span className="mt-2 block text-sm font-medium text-custom-text-200">
-                              {isDragActive
-                                ? "Drop image here to upload"
-                                : "Drag & drop image here"}
+                              {isDragActive ? "Drop image here to upload" : "Drag & drop image here"}
                             </span>
                           </div>
                         )}
@@ -185,19 +183,17 @@ export const ImageUploadModal: React.FC<Props> = ({
                 </p>
                 <div className="flex items-center justify-between">
                   <div className="flex items-center">
-                    <DangerButton onClick={handleDelete} outline disabled={!value}>
+                    <Button variant="danger" onClick={handleDelete} disabled={!value}>
                       {isRemoving ? "Removing..." : "Remove"}
-                    </DangerButton>
+                    </Button>
                   </div>
                   <div className="flex items-center gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton
-                      onClick={handleSubmit}
-                      disabled={!image}
-                      loading={isImageUploading}
-                    >
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={handleSubmit} disabled={!image} loading={isImageUploading}>
                       {isImageUploading ? "Uploading..." : "Upload & Save"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/core/modals/link-modal.tsx b/web/components/core/modals/link-modal.tsx
index bed74fca0..e2833f61f 100644
--- a/web/components/core/modals/link-modal.tsx
+++ b/web/components/core/modals/link-modal.tsx
@@ -1,11 +1,11 @@
-import React, { useEffect } from "react";
+import { FC, useEffect, Fragment } from "react";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import type { IIssueLink, linkDetails, ModuleLink } from "types";
 
@@ -23,18 +23,13 @@ const defaultValues: IIssueLink | ModuleLink = {
   url: "",
 };
 
-export const LinkModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  createIssueLink,
-  updateIssueLink,
-  status,
-  data,
-}) => {
+export const LinkModal: FC<Props> = (props) => {
+  const { isOpen, handleClose, createIssueLink, updateIssueLink, status, data } = props;
+  // form info
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
   } = useForm<ModuleLink>({
     defaultValues,
@@ -70,10 +65,10 @@ export const LinkModal: React.FC<Props> = ({
   }, [data, reset]);
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={onClose}>
         <Transition.Child
-          as={React.Fragment}
+          as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -87,7 +82,7 @@ export const LinkModal: React.FC<Props> = ({
         <div className="fixed inset-0 z-10 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
             <Transition.Child
-              as={React.Fragment}
+              as={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"
@@ -99,46 +94,65 @@ export const LinkModal: React.FC<Props> = ({
                 <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
                   <div>
                     <div className="space-y-5">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         {status ? "Update Link" : "Add Link"}
                       </Dialog.Title>
                       <div className="mt-2 space-y-3">
                         <div>
-                          <Input
-                            id="url"
-                            label="URL"
+                          <label htmlFor="url" className="text-custom-text-200 mb-2">
+                            URL
+                          </label>
+                          <Controller
+                            control={control}
                             name="url"
-                            type="url"
-                            placeholder="https://..."
-                            autoComplete="off"
-                            error={errors.url}
-                            register={register}
-                            validations={{
+                            rules={{
                               required: "URL is required",
                             }}
+                            render={({ field: { value, onChange, ref } }) => (
+                              <Input
+                                id="url"
+                                name="url"
+                                type="url"
+                                value={value}
+                                onChange={onChange}
+                                ref={ref}
+                                hasError={Boolean(errors.url)}
+                                placeholder="https://..."
+                                className="w-full"
+                              />
+                            )}
                           />
                         </div>
                         <div>
-                          <Input
-                            id="title"
-                            label="Title (optional)"
+                          <label htmlFor="title" className="text-custom-text-200 mb-2">
+                            {`Title (optional)`}
+                          </label>
+                          <Controller
+                            control={control}
                             name="title"
-                            type="text"
-                            placeholder="Enter title"
-                            autoComplete="off"
-                            error={errors.title}
-                            register={register}
+                            render={({ field: { value, onChange, ref } }) => (
+                              <Input
+                                id="title"
+                                name="title"
+                                type="text"
+                                value={value}
+                                onChange={onChange}
+                                ref={ref}
+                                hasError={Boolean(errors.title)}
+                                placeholder="Enter title"
+                                className="w-full"
+                              />
+                            )}
                           />
                         </div>
                       </div>
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
                       {status
                         ? isSubmitting
                           ? "Updating Link..."
@@ -146,7 +160,7 @@ export const LinkModal: React.FC<Props> = ({
                         : isSubmitting
                         ? "Adding Link..."
                         : "Add Link"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/core/reaction-selector.tsx b/web/components/core/reaction-selector.tsx
index 43d77de9e..6676b0be8 100644
--- a/web/components/core/reaction-selector.tsx
+++ b/web/components/core/reaction-selector.tsx
@@ -1,24 +1,11 @@
 import { Fragment } from "react";
-
-// headless ui
 import { Popover, Transition } from "@headlessui/react";
-
 // helper
 import { renderEmoji } from "helpers/emoji.helper";
-
 // icons
 import { Icon } from "components/ui";
 
-const reactionEmojis = [
-  "128077",
-  "128078",
-  "128516",
-  "128165",
-  "128533",
-  "129505",
-  "9992",
-  "128064",
-];
+const reactionEmojis = ["128077", "128078", "128516", "128165", "128533", "129505", "9992", "128064"];
 
 interface Props {
   size?: "sm" | "md" | "lg";
@@ -28,7 +15,7 @@ interface Props {
 }
 
 export const ReactionSelector: React.FC<Props> = (props) => {
-  const { value, onSelect, position, size } = props;
+  const { onSelect, position, size } = props;
 
   return (
     <Popover className="relative">
diff --git a/web/components/core/sidebar/single-progress-stats.tsx b/web/components/core/sidebar/single-progress-stats.tsx
index 1498c9bad..3ff214b57 100644
--- a/web/components/core/sidebar/single-progress-stats.tsx
+++ b/web/components/core/sidebar/single-progress-stats.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ProgressBar } from "components/ui";
+import { ProgressBar } from "@plane/ui";
 
 type TSingleProgressStatsProps = {
   title: any;
@@ -30,10 +30,7 @@ export const SingleProgressStats: React.FC<TSingleProgressStatsProps> = ({
           <ProgressBar value={completed} maxValue={total} />
         </span>
         <span className="w-8 text-right">
-          {isNaN(Math.floor((completed / total) * 100))
-            ? "0"
-            : Math.floor((completed / total) * 100)}
-          %
+          {isNaN(Math.floor((completed / total) * 100)) ? "0" : Math.floor((completed / total) * 100)}%
         </span>
       </div>
       <span>of {total}</span>
diff --git a/web/components/core/theme/color-picker-input.tsx b/web/components/core/theme/color-picker-input.tsx
index 73d71e46b..acafe93ae 100644
--- a/web/components/core/theme/color-picker-input.tsx
+++ b/web/components/core/theme/color-picker-input.tsx
@@ -1,7 +1,8 @@
-import React from "react";
-
+import { FC, Fragment } from "react";
 // react-form
 import {
+  Control,
+  Controller,
   FieldError,
   FieldErrorsImpl,
   Merge,
@@ -13,7 +14,7 @@ import {
 import { ColorResult, SketchPicker } from "react-color";
 // component
 import { Popover, Transition } from "@headlessui/react";
-import { Input } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
 import { ColorPickerIcon } from "components/icons";
 // types
@@ -24,18 +25,14 @@ type Props = {
   position?: "left" | "right";
   watch: UseFormWatch<any>;
   setValue: UseFormSetValue<any>;
+  control: Control<ICustomTheme, any>;
   error: FieldError | Merge<FieldError, FieldErrorsImpl<any>> | undefined;
   register: UseFormRegister<any>;
 };
 
-export const ColorPickerInput: React.FC<Props> = ({
-  name,
-  position = "left",
-  watch,
-  setValue,
-  error,
-  register,
-}) => {
+export const ColorPickerInput: FC<Props> = (props) => {
+  const { name, position = "left", watch, setValue, error, control } = props;
+
   const handleColorChange = (newColor: ColorResult) => {
     const { hex } = newColor;
     setValue(name, hex);
@@ -60,22 +57,28 @@ export const ColorPickerInput: React.FC<Props> = ({
 
   return (
     <div className="relative">
-      <Input
-        id={name}
+      <Controller
+        control={control}
         name={name}
-        type="name"
-        placeholder="#FFFFFF"
-        autoComplete="off"
-        error={error}
-        value={watch(name)}
-        register={register}
-        validations={{
+        rules={{
           required: `${getColorText(name)} color is required`,
           pattern: {
             value: /^#(?:[0-9a-fA-F]{3}){1,2}$/g,
             message: `${getColorText(name)} color should be hex format`,
           },
         }}
+        render={({ field: { onChange, ref } }) => (
+          <Input
+            id={name}
+            name={name}
+            type="text"
+            value={watch("name")}
+            onChange={onChange}
+            ref={ref}
+            hasError={Boolean(error)}
+            placeholder="#FFFFFF"
+          />
+        )}
       />
       <div className="absolute right-4 top-2.5">
         <Popover className="relative grid place-items-center">
@@ -95,16 +98,12 @@ export const ColorPickerInput: React.FC<Props> = ({
                     }}
                   />
                 ) : (
-                  <ColorPickerIcon
-                    height={14}
-                    width={14}
-                    className="fill-current text-custom-text-100"
-                  />
+                  <ColorPickerIcon height={14} width={14} className="fill-current text-custom-text-100" />
                 )}
               </Popover.Button>
 
               <Transition
-                as={React.Fragment}
+                as={Fragment}
                 enter="transition ease-out duration-200"
                 enterFrom="opacity-0 translate-y-1"
                 enterTo="opacity-100 translate-y-0"
diff --git a/web/components/core/theme/custom-theme-selector.tsx b/web/components/core/theme/custom-theme-selector.tsx
index 27817c82a..f70f9e80a 100644
--- a/web/components/core/theme/custom-theme-selector.tsx
+++ b/web/components/core/theme/custom-theme-selector.tsx
@@ -5,8 +5,8 @@ import { useTheme } from "next-themes";
 import { useForm } from "react-hook-form";
 
 // ui
-import { PrimaryButton } from "components/ui";
 import { ColorPickerInput } from "components/core";
+import { Button } from "@plane/ui";
 // types
 import { ICustomTheme } from "types";
 // mobx react lite
@@ -33,11 +33,14 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
   const store: any = useMobxStore();
   const { setTheme } = useTheme();
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [darkPalette, setDarkPalette] = useState(false);
+
   const {
     register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     watch,
     setValue,
     reset,
@@ -78,12 +81,11 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
         <div className="space-y-4">
           <div className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 md:grid-cols-3">
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">
-                Background color
-              </h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Background color</h3>
               <ColorPickerInput
                 name="background"
                 position="right"
+                control={control}
                 error={errors.background}
                 watch={watch}
                 setValue={setValue}
@@ -95,6 +97,7 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
               <h3 className="text-left text-sm font-medium text-custom-text-200">Text color</h3>
               <ColorPickerInput
                 name="text"
+                control={control}
                 error={errors.text}
                 watch={watch}
                 setValue={setValue}
@@ -103,12 +106,11 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">
-                Primary(Theme) color
-              </h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Primary(Theme) color</h3>
               <ColorPickerInput
                 name="primary"
                 error={errors.primary}
+                control={control}
                 watch={watch}
                 setValue={setValue}
                 register={register}
@@ -116,12 +118,11 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">
-                Sidebar background color
-              </h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar background color</h3>
               <ColorPickerInput
                 name="sidebarBackground"
                 position="right"
+                control={control}
                 error={errors.sidebarBackground}
                 watch={watch}
                 setValue={setValue}
@@ -130,11 +131,10 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
             </div>
 
             <div className="flex flex-col items-start gap-2">
-              <h3 className="text-left text-sm font-medium text-custom-text-200">
-                Sidebar text color
-              </h3>
+              <h3 className="text-left text-sm font-medium text-custom-text-200">Sidebar text color</h3>
               <ColorPickerInput
                 name="sidebarText"
+                control={control}
                 error={errors.sidebarText}
                 watch={watch}
                 setValue={setValue}
@@ -145,9 +145,9 @@ export const CustomThemeSelector: React.FC<Props> = observer(({ preLoadedData })
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <PrimaryButton type="submit" loading={isSubmitting}>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
           {isSubmitting ? "Creating Theme..." : "Set Theme"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/core/theme/theme-switch.tsx b/web/components/core/theme/theme-switch.tsx
index 56d07fbad..2c169ec44 100644
--- a/web/components/core/theme/theme-switch.tsx
+++ b/web/components/core/theme/theme-switch.tsx
@@ -24,7 +24,7 @@ export const ThemeSwitch: React.FC<Props> = observer(
   ({ setPreLoadedData, customThemeSelectorOptions, setCustomThemeSelectorOptions }) => {
     const store: any = useMobxStore();
 
-    const { user, mutateUser } = useUser();
+    const { user } = useUser();
     const { theme, setTheme } = useTheme();
 
     const updateUserTheme = (newTheme: string) => {
@@ -72,19 +72,15 @@ export const ThemeSwitch: React.FC<Props> = observer(
         }
         onChange={({ value, type }: { value: string; type: string }) => {
           if (value === "custom") {
-            if (user?.theme.palette) {
+            if (user?.theme?.palette) {
               setPreLoadedData({
-                background: user.theme.background !== "" ? user.theme.background : "#0d101b",
+                background: user.theme?.background !== "" ? user.theme.background : "#0d101b",
                 text: user.theme.text !== "" ? user.theme.text : "#c5c5c5",
                 primary: user.theme.primary !== "" ? user.theme.primary : "#3f76ff",
-                sidebarBackground:
-                  user.theme.sidebarBackground !== "" ? user.theme.sidebarBackground : "#0d101b",
+                sidebarBackground: user.theme.sidebarBackground !== "" ? user.theme.sidebarBackground : "#0d101b",
                 sidebarText: user.theme.sidebarText !== "" ? user.theme.sidebarText : "#c5c5c5",
                 darkPalette: false,
-                palette:
-                  user.theme.palette !== ",,,,"
-                    ? user.theme.palette
-                    : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+                palette: user.theme.palette !== ",,,," ? user.theme.palette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
                 theme: "custom",
               });
             }
diff --git a/web/components/core/views/all-views.tsx b/web/components/core/views/all-views.tsx
index 75038f57b..7711dc2a6 100644
--- a/web/components/core/views/all-views.tsx
+++ b/web/components/core/views/all-views.tsx
@@ -1,229 +1,220 @@
-import React, { useCallback, useState } from "react";
+// import React, { useCallback, useState } from "react";
+// import { useRouter } from "next/router";
+// import useSWR from "swr";
+// import { DragDropContext, DropResult } from "react-beautiful-dnd";
+// // services
+// import { ProjectStateService } from "services/project";
+// // hooks
+// import useUser from "hooks/use-user";
+// import { useProjectMyMembership } from "contexts/project-member.context";
+// import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
+// // components
+// import StrictModeDroppable from "components/dnd/StrictModeDroppable";
+// import { AllLists, AllBoards, CalendarView, SpreadsheetView, GanttChartView } from "components/core";
+// import { EmptyState } from "components/common";
+// // ui
+// import { Spinner } from "components/ui";
+// // icons
+// import { TrashIcon } from "@heroicons/react/24/outline";
+// // images
+// import emptyIssue from "public/empty-state/issue.svg";
+// import emptyIssueArchive from "public/empty-state/issue-archive.svg";
+// // helpers
+// import { getStatesList } from "helpers/state.helper";
+// // types
+// import { IIssue, IIssueViewProps } from "types";
+// // fetch-keys
+// import { STATES_LIST } from "constants/fetch-keys";
 
-import { useRouter } from "next/router";
+// type Props = {
+//   addIssueToDate: (date: string) => void;
+//   addIssueToGroup: (groupTitle: string) => void;
+//   disableUserActions: boolean;
+//   dragDisabled?: boolean;
+//   emptyState: {
+//     title: string;
+//     description?: string;
+//     primaryButton?: {
+//       icon: any;
+//       text: string;
+//       onClick: () => void;
+//     };
+//     secondaryButton?: React.ReactNode;
+//   };
+//   handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+//   handleDraftIssueAction?: (issue: IIssue, action: "edit" | "delete") => void;
+//   handleOnDragEnd: (result: DropResult) => Promise<void>;
+//   openIssuesListModal: (() => void) | null;
+//   removeIssue: ((bridgeId: string, issueId: string) => void) | null;
+//   disableAddIssueOption?: boolean;
+//   trashBox: boolean;
+//   setTrashBox: React.Dispatch<React.SetStateAction<boolean>>;
+//   viewProps: IIssueViewProps;
+// };
 
-import useSWR from "swr";
+// const projectStateService = new ProjectStateService();
 
-// react-beautiful-dnd
-import { DragDropContext, DropResult } from "react-beautiful-dnd";
-import StrictModeDroppable from "components/dnd/StrictModeDroppable";
-// services
-import stateService from "services/state.service";
-// hooks
-import useUser from "hooks/use-user";
-import { useProjectMyMembership } from "contexts/project-member.context";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
-// components
-import {
-  AllLists,
-  AllBoards,
-  CalendarView,
-  SpreadsheetView,
-  GanttChartView,
-} from "components/core";
-// ui
-import { EmptyState, Spinner } from "components/ui";
-// icons
-import { TrashIcon } from "@heroicons/react/24/outline";
-// images
-import emptyIssue from "public/empty-state/issue.svg";
-import emptyIssueArchive from "public/empty-state/issue-archive.svg";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-// types
-import { IIssue, IIssueViewProps } from "types";
-// fetch-keys
-import { STATES_LIST } from "constants/fetch-keys";
+// export const AllViews: React.FC<Props> = ({
+//   addIssueToDate,
+//   addIssueToGroup,
+//   disableUserActions,
+//   dragDisabled = false,
+//   emptyState,
+//   handleIssueAction,
+//   handleDraftIssueAction,
+//   handleOnDragEnd,
+//   openIssuesListModal,
+//   removeIssue,
+//   disableAddIssueOption = false,
+//   trashBox,
+//   setTrashBox,
+//   viewProps,
+// }) => {
+//   const router = useRouter();
+//   const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
 
-type Props = {
-  addIssueToDate: (date: string) => void;
-  addIssueToGroup: (groupTitle: string) => void;
-  disableUserActions: boolean;
-  dragDisabled?: boolean;
-  emptyState: {
-    title: string;
-    description?: string;
-    primaryButton?: {
-      icon: any;
-      text: string;
-      onClick: () => void;
-    };
-    secondaryButton?: React.ReactNode;
-  };
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  handleDraftIssueAction?: (issue: IIssue, action: "edit" | "delete") => void;
-  handleOnDragEnd: (result: DropResult) => Promise<void>;
-  openIssuesListModal: (() => void) | null;
-  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
-  disableAddIssueOption?: boolean;
-  trashBox: boolean;
-  setTrashBox: React.Dispatch<React.SetStateAction<boolean>>;
-  viewProps: IIssueViewProps;
-};
+//   const [myIssueProjectId, setMyIssueProjectId] = useState<string | null>(null);
 
-export const AllViews: React.FC<Props> = ({
-  addIssueToDate,
-  addIssueToGroup,
-  disableUserActions,
-  dragDisabled = false,
-  emptyState,
-  handleIssueAction,
-  handleDraftIssueAction,
-  handleOnDragEnd,
-  openIssuesListModal,
-  removeIssue,
-  disableAddIssueOption = false,
-  trashBox,
-  setTrashBox,
-  viewProps,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+//   const { user } = useUser();
+//   const { memberRole } = useProjectMyMembership();
 
-  const [myIssueProjectId, setMyIssueProjectId] = useState<string | null>(null);
+//   const { groupedIssues, isEmpty, displayFilters } = viewProps;
 
-  const { user } = useUser();
-  const { memberRole } = useProjectMyMembership();
+//   const { spreadsheetIssues, mutateIssues } = useSpreadsheetIssuesView();
 
-  const { groupedIssues, isEmpty, displayFilters } = viewProps;
+//   const { data: stateGroups } = useSWR(
+//     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
+//     workspaceSlug ? () => projectStateService.getStates(workspaceSlug as string, projectId as string) : null
+//   );
+//   const states = getStatesList(stateGroups);
 
-  const { spreadsheetIssues, mutateIssues } = useSpreadsheetIssuesView();
+//   const handleMyIssueOpen = (issue: IIssue) => {
+//     setMyIssueProjectId(issue.project);
+//   };
 
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const states = getStatesList(stateGroups);
+//   const handleTrashBox = useCallback(
+//     (isDragging: boolean) => {
+//       if (isDragging && !trashBox) setTrashBox(true);
+//     },
+//     [trashBox, setTrashBox]
+//   );
 
-  const handleMyIssueOpen = (issue: IIssue) => {
-    setMyIssueProjectId(issue.project);
-  };
+//   return (
+//     <DragDropContext onDragEnd={handleOnDragEnd}>
+//       <StrictModeDroppable droppableId="trashBox">
+//         {(provided, snapshot) => (
+//           <div
+//             className={`${
+//               trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
+//             } fixed top-4 left-1/2 -translate-x-1/2 z-40 w-72 flex items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
+//               snapshot.isDraggingOver ? "bg-red-500 blur-2xl opacity-70" : ""
+//             } transition duration-300`}
+//             ref={provided.innerRef}
+//             {...provided.droppableProps}
+//           >
+//             <TrashIcon className="h-4 w-4" />
+//             Drop here to delete the issue.
+//           </div>
+//         )}
+//       </StrictModeDroppable>
+//       {groupedIssues ? (
+//         !isEmpty ||
+//         displayFilters?.layout === "kanban" ||
+//         displayFilters?.layout === "calendar" ||
+//         displayFilters?.layout === "gantt_chart" ? (
+//           <>
+//             {displayFilters?.layout === "list" ? (
+//               <AllLists
+//                 states={states}
+//                 addIssueToGroup={addIssueToGroup}
+//                 handleIssueAction={handleIssueAction}
+//                 handleDraftIssueAction={handleDraftIssueAction}
+//                 openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
+//                 removeIssue={removeIssue}
+//                 myIssueProjectId={myIssueProjectId}
+//                 handleMyIssueOpen={handleMyIssueOpen}
+//                 disableUserActions={disableUserActions}
+//                 disableAddIssueOption={disableAddIssueOption}
+//                 user={user}
+//                 userAuth={memberRole}
+//                 viewProps={viewProps}
+//               />
+//             ) : displayFilters?.layout === "kanban" ? (
+//               <AllBoards
+//                 addIssueToGroup={addIssueToGroup}
+//                 disableUserActions={disableUserActions}
+//                 disableAddIssueOption={disableAddIssueOption}
+//                 dragDisabled={dragDisabled}
+//                 handleIssueAction={handleIssueAction}
+//                 handleDraftIssueAction={handleDraftIssueAction}
+//                 handleTrashBox={handleTrashBox}
+//                 openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
+//                 myIssueProjectId={myIssueProjectId}
+//                 handleMyIssueOpen={handleMyIssueOpen}
+//                 removeIssue={removeIssue}
+//                 states={states}
+//                 user={user}
+//                 userAuth={memberRole}
+//                 viewProps={viewProps}
+//               />
+//             ) : displayFilters?.layout === "calendar" ? (
+//               <CalendarView
+//                 handleIssueAction={handleIssueAction}
+//                 addIssueToDate={addIssueToDate}
+//                 disableUserActions={disableUserActions}
+//                 user={user}
+//                 userAuth={memberRole}
+//               />
+//             ) : displayFilters?.layout === "spreadsheet" ? (
+//               <SpreadsheetView
+//                 handleIssueAction={handleIssueAction}
+//                 spreadsheetIssues={spreadsheetIssues}
+//                 mutateIssues={mutateIssues}
+//                 openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
+//                 disableUserActions={disableUserActions}
+//                 user={user}
+//                 userAuth={memberRole}
+//               />
+//             ) : (
+//               displayFilters?.layout === "gantt_chart" && <GanttChartView disableUserActions={disableUserActions} />
+//             )}
+//           </>
+//         ) : router.pathname.includes("archived-issues") ? (
+//           <EmptyState
+//             title="Archived Issues will be shown here"
+//             description="All the issues that have been in the completed or canceled groups for the configured period of time can be viewed here."
+//             image={emptyIssueArchive}
+//             primaryButton={{
+//               text: "Go to Automation Settings",
+//               onClick: () => {
+//                 router.push(`/${workspaceSlug}/projects/${projectId}/settings/automations`);
+//               },
+//             }}
+//           />
+//         ) : (
+//           <EmptyState
+//             title={emptyState.title}
+//             description={emptyState.description}
+//             image={emptyIssue}
+//             primaryButton={
+//               emptyState.primaryButton
+//                 ? {
+//                     icon: emptyState.primaryButton.icon,
+//                     text: emptyState.primaryButton.text,
+//                     onClick: emptyState.primaryButton.onClick,
+//                   }
+//                 : undefined
+//             }
+//             secondaryButton={emptyState.secondaryButton}
+//           />
+//         )
+//       ) : (
+//         <div className="flex h-full w-full items-center justify-center">
+//           <Spinner />
+//         </div>
+//       )}
+//     </DragDropContext>
+//   );
+// };
 
-  const handleTrashBox = useCallback(
-    (isDragging: boolean) => {
-      if (isDragging && !trashBox) setTrashBox(true);
-    },
-    [trashBox, setTrashBox]
-  );
-
-  return (
-    <DragDropContext onDragEnd={handleOnDragEnd}>
-      <StrictModeDroppable droppableId="trashBox">
-        {(provided, snapshot) => (
-          <div
-            className={`${
-              trashBox ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
-            } fixed top-4 left-1/2 -translate-x-1/2 z-40 w-72 flex items-center justify-center gap-2 rounded border-2 border-red-500/20 bg-custom-background-100 px-3 py-5 text-xs font-medium italic text-red-500 ${
-              snapshot.isDraggingOver ? "bg-red-500 blur-2xl opacity-70" : ""
-            } transition duration-300`}
-            ref={provided.innerRef}
-            {...provided.droppableProps}
-          >
-            <TrashIcon className="h-4 w-4" />
-            Drop here to delete the issue.
-          </div>
-        )}
-      </StrictModeDroppable>
-      {groupedIssues ? (
-        !isEmpty ||
-        displayFilters?.layout === "kanban" ||
-        displayFilters?.layout === "calendar" ||
-        displayFilters?.layout === "gantt_chart" ? (
-          <>
-            {displayFilters?.layout === "list" ? (
-              <AllLists
-                states={states}
-                addIssueToGroup={addIssueToGroup}
-                handleIssueAction={handleIssueAction}
-                handleDraftIssueAction={handleDraftIssueAction}
-                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
-                removeIssue={removeIssue}
-                myIssueProjectId={myIssueProjectId}
-                handleMyIssueOpen={handleMyIssueOpen}
-                disableUserActions={disableUserActions}
-                disableAddIssueOption={disableAddIssueOption}
-                user={user}
-                userAuth={memberRole}
-                viewProps={viewProps}
-              />
-            ) : displayFilters?.layout === "kanban" ? (
-              <AllBoards
-                addIssueToGroup={addIssueToGroup}
-                disableUserActions={disableUserActions}
-                disableAddIssueOption={disableAddIssueOption}
-                dragDisabled={dragDisabled}
-                handleIssueAction={handleIssueAction}
-                handleDraftIssueAction={handleDraftIssueAction}
-                handleTrashBox={handleTrashBox}
-                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
-                myIssueProjectId={myIssueProjectId}
-                handleMyIssueOpen={handleMyIssueOpen}
-                removeIssue={removeIssue}
-                states={states}
-                user={user}
-                userAuth={memberRole}
-                viewProps={viewProps}
-              />
-            ) : displayFilters?.layout === "calendar" ? (
-              <CalendarView
-                handleIssueAction={handleIssueAction}
-                addIssueToDate={addIssueToDate}
-                disableUserActions={disableUserActions}
-                user={user}
-                userAuth={memberRole}
-              />
-            ) : displayFilters?.layout === "spreadsheet" ? (
-              <SpreadsheetView
-                handleIssueAction={handleIssueAction}
-                spreadsheetIssues={spreadsheetIssues}
-                mutateIssues={mutateIssues}
-                openIssuesListModal={cycleId || moduleId ? openIssuesListModal : null}
-                disableUserActions={disableUserActions}
-                user={user}
-                userAuth={memberRole}
-              />
-            ) : (
-              displayFilters?.layout === "gantt_chart" && (
-                <GanttChartView disableUserActions={disableUserActions} />
-              )
-            )}
-          </>
-        ) : router.pathname.includes("archived-issues") ? (
-          <EmptyState
-            title="Archived Issues will be shown here"
-            description="All the issues that have been in the completed or canceled groups for the configured period of time can be viewed here."
-            image={emptyIssueArchive}
-            primaryButton={{
-              text: "Go to Automation Settings",
-              onClick: () => {
-                router.push(`/${workspaceSlug}/projects/${projectId}/settings/automations`);
-              },
-            }}
-          />
-        ) : (
-          <EmptyState
-            title={emptyState.title}
-            description={emptyState.description}
-            image={emptyIssue}
-            primaryButton={
-              emptyState.primaryButton
-                ? {
-                    icon: emptyState.primaryButton.icon,
-                    text: emptyState.primaryButton.text,
-                    onClick: emptyState.primaryButton.onClick,
-                  }
-                : undefined
-            }
-            secondaryButton={emptyState.secondaryButton}
-          />
-        )
-      ) : (
-        <div className="flex h-full w-full items-center justify-center">
-          <Spinner />
-        </div>
-      )}
-    </DragDropContext>
-  );
-};
+export const AllViews = () => <></>;
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 37503043a..000000000
--- 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 1c2bef60f..000000000
--- 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 a5a6ee497..000000000
--- 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 1d6103d19..000000000
--- 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 1325f8cab..000000000
--- 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 1a213bccc..000000000
--- 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 fd69ed443..000000000
--- 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 7758f64cd..000000000
--- 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 75d8a3a1e..000000000
--- 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 51b6c518b..000000000
--- 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 a67ca762b..000000000
--- 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 e0e9aa2a5..000000000
--- 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/gantt-chart-view/index.tsx b/web/components/core/views/gantt-chart-view/index.tsx
deleted file mode 100644
index 2cd10f95f..000000000
--- a/web/components/core/views/gantt-chart-view/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useRouter } from "next/router";
-
-// components
-import { CycleIssuesGanttChartView } from "components/cycles";
-import { IssueGanttChartView } from "components/issues";
-import { ModuleIssuesGanttChartView } from "components/modules";
-import { ViewIssuesGanttChartView } from "components/views";
-
-type Props = {
-  disableUserActions: boolean;
-};
-
-export const GanttChartView: React.FC<Props> = ({ disableUserActions }) => {
-  const router = useRouter();
-  const { cycleId, moduleId, viewId } = router.query;
-
-  return (
-    <>
-      {cycleId ? (
-        <CycleIssuesGanttChartView disableUserActions={disableUserActions} />
-      ) : moduleId ? (
-        <ModuleIssuesGanttChartView disableUserActions={disableUserActions} />
-      ) : viewId ? (
-        <ViewIssuesGanttChartView disableUserActions={disableUserActions} />
-      ) : (
-        <IssueGanttChartView disableUserActions={disableUserActions} />
-      )}
-    </>
-  );
-};
diff --git a/web/components/core/views/index.ts b/web/components/core/views/index.ts
index 13da90d8e..5a3edcd20 100644
--- a/web/components/core/views/index.ts
+++ b/web/components/core/views/index.ts
@@ -1,8 +1,3 @@
-export * from "./board-view";
-export * from "./calendar-view";
-export * from "./gantt-chart-view";
-export * from "./list-view";
 export * from "./spreadsheet-view";
-export * from "./all-views";
 export * from "./issues-view";
 export * from "./inline-issue-create-wrapper";
diff --git a/web/components/core/views/inline-issue-create-wrapper.tsx b/web/components/core/views/inline-issue-create-wrapper.tsx
index ec5d8e79e..feed64209 100644
--- a/web/components/core/views/inline-issue-create-wrapper.tsx
+++ b/web/components/core/views/inline-issue-create-wrapper.tsx
@@ -1,21 +1,11 @@
 import { useEffect, useRef } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import { mutate } from "swr";
-
-// react hook form
 import { useForm, FormProvider } from "react-hook-form";
-
-// headless ui
 import { Transition } from "@headlessui/react";
-
 // services
-import modulesService from "services/modules.service";
-import issuesService from "services/issues.service";
-
+import { ModuleService } from "services/module.service";
+import { IssueService, IssueDraftService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
@@ -23,10 +13,9 @@ import useKeypress from "hooks/use-keypress";
 import useIssuesView from "hooks/use-issues-view";
 import useMyIssues from "hooks/my-issues/use-my-issues";
 import useGanttChartIssues from "hooks/gantt-chart/issue-view";
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
+// import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 import useOutsideClickDetector from "hooks/use-outside-click-detector";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
-
+// import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 // helpers
 import { getFetchKeysForIssueMutation } from "helpers/string.helper";
 
@@ -58,6 +47,10 @@ type Props = {
   children?: React.ReactNode;
 };
 
+const issueService = new IssueService();
+const issueDraftService = new IssueDraftService();
+const moduleService = new ModuleService();
+
 export const addIssueToCycle = async (
   workspaceSlug: string,
   projectId: string,
@@ -68,7 +61,7 @@ export const addIssueToCycle = async (
 ) => {
   if (!workspaceSlug || !projectId) return;
 
-  await issuesService
+  await issueService
     .addIssueToCycle(
       workspaceSlug as string,
       projectId.toString(),
@@ -94,7 +87,7 @@ export const addIssueToModule = async (
   user: any,
   params: any
 ) => {
-  await modulesService
+  await moduleService
     .addIssuesToModule(
       workspaceSlug as string,
       projectId.toString(),
@@ -127,14 +120,11 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
   const { setToastAlert } = useToast();
 
   const { displayFilters, params } = useIssuesView();
-  const { params: calendarParams } = useCalendarIssuesView();
+  // const { params: calendarParams } = useCalendarIssuesView();
   const { ...viewGanttParams } = params;
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
+  // const { params: spreadsheetParams } = useSpreadsheetIssuesView();
   const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
-  const { params: ganttParams } = useGanttChartIssues(
-    workspaceSlug?.toString(),
-    projectId?.toString()
-  );
+  const { params: ganttParams } = useGanttChartIssues(workspaceSlug?.toString(), projectId?.toString());
 
   const method = useForm<IIssue>({ defaultValues });
   const {
@@ -171,13 +161,11 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
     });
   }, [errors, setToastAlert]);
 
-  const { calendarFetchKey, ganttFetchKey, spreadsheetFetchKey } = getFetchKeysForIssueMutation({
+  const { ganttFetchKey } = getFetchKeysForIssueMutation({
     cycleId: cycleId,
     moduleId: moduleId,
     viewId: viewId,
     projectId: projectId?.toString() ?? "",
-    calendarParams,
-    spreadsheetParams,
     viewGanttParams,
     ganttParams,
   });
@@ -188,40 +176,18 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
     reset({ ...defaultValues });
 
     await (!isDraftIssues
-      ? issuesService.createIssues(workspaceSlug.toString(), projectId.toString(), formData, user)
-      : issuesService.createDraftIssue(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          formData,
-          user
-        )
+      ? issueService.createIssues(workspaceSlug.toString(), projectId.toString(), formData, user)
+      : issueDraftService.createDraftIssue(workspaceSlug.toString(), projectId.toString(), formData)
     )
       .then(async (res) => {
         await mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params));
         if (formData.cycle && formData.cycle !== "")
-          await addIssueToCycle(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            res.id,
-            formData.cycle,
-            user,
-            params
-          );
+          await addIssueToCycle(workspaceSlug.toString(), projectId.toString(), res.id, formData.cycle, user, params);
         if (formData.module && formData.module !== "")
-          await addIssueToModule(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            res.id,
-            formData.module,
-            user,
-            params
-          );
+          await addIssueToModule(workspaceSlug.toString(), projectId.toString(), res.id, formData.module, user, params);
 
-        if (isDraftIssues)
-          await mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(projectId.toString() ?? "", params));
-        if (displayFilters.layout === "calendar") await mutate(calendarFetchKey);
+        if (isDraftIssues) await mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(projectId.toString() ?? "", params));
         if (displayFilters.layout === "gantt_chart") await mutate(ganttFetchKey);
-        if (displayFilters.layout === "spreadsheet") await mutate(spreadsheetFetchKey);
         if (groupedIssues) await mutateMyIssues();
 
         setToastAlert({
diff --git a/web/components/core/views/issues-view.tsx b/web/components/core/views/issues-view.tsx
index 3c123c2ac..9bb30fd3e 100644
--- a/web/components/core/views/issues-view.tsx
+++ b/web/components/core/views/issues-view.tsx
@@ -1,633 +1,588 @@
-import { useCallback, useEffect, useState } from "react";
+// import { useCallback, useEffect, useState, FC } from "react";
+// import { useRouter } from "next/router";
+// import useSWR, { mutate } from "swr";
+// import { DropResult } from "react-beautiful-dnd";
+// // services
+// import { IssueService, IssueLabelService } from "services/issue";
+// import { ProjectStateService } from "services/project";
+// import { ModuleService } from "services/module.service";
+// import { TrackEventService } from "services/track_event.service";
+// // hooks
+// import useToast from "hooks/use-toast";
+// import useIssuesView from "hooks/use-issues-view";
+// import useUserAuth from "hooks/use-user-auth";
+// import useIssuesProperties from "hooks/use-issue-properties";
+// import useProjectMembers from "hooks/use-project-members";
+// // components
+// import { FiltersList } from "components/core";
+// import {
+//   CreateUpdateIssueModal,
+//   DeleteIssueModal,
+//   DeleteDraftIssueModal,
+//   CreateUpdateDraftIssueModal,
+// } from "components/issues";
+// import { CreateUpdateViewModal } from "components/views";
+// // ui
+// import { Button } from "@plane/ui";
+// // icons
+// import { PlusIcon } from "@heroicons/react/24/outline";
+// // helpers
+// import { getStatesList } from "helpers/state.helper";
+// import { orderArrayBy } from "helpers/array.helper";
+// // types
+// import { IIssue, IIssueFilterOptions, IState, TIssuePriorities } from "types";
+// // fetch-keys
+// import {
+//   CYCLE_DETAILS,
+//   CYCLE_ISSUES_WITH_PARAMS,
+//   MODULE_DETAILS,
+//   MODULE_ISSUES_WITH_PARAMS,
+//   PROJECT_ISSUES_LIST_WITH_PARAMS,
+//   PROJECT_ISSUE_LABELS,
+//   STATES_LIST,
+// } from "constants/fetch-keys";
 
-import { useRouter } from "next/router";
+// type Props = {
+//   openIssuesListModal?: () => void;
+//   disableUserActions?: boolean;
+// };
 
-import useSWR, { mutate } from "swr";
+// const issueService = new IssueService();
+// const issueLabelService = new IssueLabelService();
+// const projectStateService = new ProjectStateService();
+// const moduleService = new ModuleService();
+// const trackEventService = new TrackEventService();
 
-// react-beautiful-dnd
-import { DropResult } from "react-beautiful-dnd";
-// services
-import issuesService from "services/issues.service";
-import stateService from "services/state.service";
-import modulesService from "services/modules.service";
-import trackEventServices from "services/track-event.service";
-// hooks
-import useToast from "hooks/use-toast";
-import useIssuesView from "hooks/use-issues-view";
-import useUserAuth from "hooks/use-user-auth";
-import useIssuesProperties from "hooks/use-issue-properties";
-import useProjectMembers from "hooks/use-project-members";
-// components
-import { FiltersList, AllViews } from "components/core";
-import {
-  CreateUpdateIssueModal,
-  DeleteIssueModal,
-  DeleteDraftIssueModal,
-  CreateUpdateDraftIssueModal,
-} from "components/issues";
-import { CreateUpdateViewModal } from "components/views";
-// ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// helpers
-import { getStatesList } from "helpers/state.helper";
-import { orderArrayBy } from "helpers/array.helper";
-// types
-import { IIssue, IIssueFilterOptions, IState, TIssuePriorities } from "types";
-// fetch-keys
-import {
-  CYCLE_DETAILS,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_DETAILS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  PROJECT_ISSUE_LABELS,
-  STATES_LIST,
-} from "constants/fetch-keys";
+// export const IssuesView: FC<Props> = () => {
+//   // const { openIssuesListModal, disableUserActions = false } = props;
+//   // create issue modal
+//   const [createIssueModal, setCreateIssueModal] = useState(false);
+//   const [createViewModal, setCreateViewModal] = useState<any>(null);
+//   const [preloadedData, setPreloadedData] = useState<
+//     (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
+//   >(undefined);
 
-type Props = {
-  openIssuesListModal?: () => void;
-  disableUserActions?: boolean;
-};
+//   // update issue modal
+//   const [editIssueModal, setEditIssueModal] = useState(false);
+//   const [issueToEdit, setIssueToEdit] = useState<(IIssue & { actionType: "edit" | "delete" }) | undefined>(undefined);
 
-export const IssuesView: React.FC<Props> = ({
-  openIssuesListModal,
-  disableUserActions = false,
-}) => {
-  // create issue modal
-  const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [createViewModal, setCreateViewModal] = useState<any>(null);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
+//   // delete issue modal
+//   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+//   const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
 
-  // update issue modal
-  const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
+//   // trash box
+//   // const [trashBox, setTrashBox] = useState(false);
 
-  // delete issue modal
-  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+//   // selected draft issue
+//   const [selectedDraftIssue, setSelectedDraftIssue] = useState<IIssue | null>(null);
+//   const [selectedDraftForDelete, setSelectDraftForDelete] = useState<IIssue | null>(null);
 
-  // trash box
-  const [trashBox, setTrashBox] = useState(false);
+//   const router = useRouter();
+//   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
-  // selected draft issue
-  const [selectedDraftIssue, setSelectedDraftIssue] = useState<IIssue | null>(null);
-  const [selectedDraftForDelete, setSelectDraftForDelete] = useState<IIssue | null>(null);
+//   const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
+//   // const isArchivedIssues = router.pathname?.split("/")?.[4] === "archived-issues";
 
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
+//   const { user } = useUserAuth();
 
-  const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
-  const isArchivedIssues = router.pathname?.split("/")?.[4] === "archived-issues";
+//   const { setToastAlert } = useToast();
 
-  const { user } = useUserAuth();
+//   const { groupedByIssues, mutateIssues, displayFilters, filters, isEmpty, setFilters, params, setDisplayFilters } =
+//     useIssuesView();
+//   const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
 
-  const { setToastAlert } = useToast();
+//   const { data: stateGroups } = useSWR(
+//     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
+//     workspaceSlug ? () => projectStateService.getStates(workspaceSlug as string, projectId as string) : null
+//   );
+//   const states = getStatesList(stateGroups);
 
-  const {
-    groupedByIssues,
-    mutateIssues,
-    displayFilters,
-    filters,
-    isEmpty,
-    setFilters,
-    params,
-    setDisplayFilters,
-  } = useIssuesView();
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
+//   const { data: labels } = useSWR(
+//     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
+//     workspaceSlug && projectId
+//       ? () => issueLabelService.getProjectIssueLabels(workspaceSlug.toString(), projectId.toString())
+//       : null
+//   );
 
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
-    workspaceSlug
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const states = getStatesList(stateGroups);
+//   const { members } = useProjectMembers(workspaceSlug?.toString(), projectId?.toString());
 
-  const { data: labels } = useSWR(
-    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
+//   useEffect(() => {
+//     if (!isDraftIssues) return;
 
-  const { members } = useProjectMembers(workspaceSlug?.toString(), projectId?.toString());
+//     if (
+//       displayFilters.layout === "calendar" ||
+//       displayFilters.layout === "gantt_chart" ||
+//       displayFilters.layout === "spreadsheet"
+//     )
+//       setDisplayFilters({ layout: "list" });
+//   }, [isDraftIssues, displayFilters, setDisplayFilters]);
 
-  useEffect(() => {
-    if (!isDraftIssues) return;
+//   const handleDeleteIssue = useCallback(
+//     (issue: IIssue) => {
+//       setDeleteIssueModal(true);
+//       setIssueToDelete(issue);
+//     },
+//     [setDeleteIssueModal, setIssueToDelete]
+//   );
 
-    if (
-      displayFilters.layout === "calendar" ||
-      displayFilters.layout === "gantt_chart" ||
-      displayFilters.layout === "spreadsheet"
-    )
-      setDisplayFilters({ layout: "list" });
-  }, [isDraftIssues, displayFilters, setDisplayFilters]);
+//   const handleDraftIssueClick = useCallback((issue: any) => setSelectedDraftIssue(issue), []);
+//   const handleDraftIssueDelete = useCallback((issue: any) => setSelectDraftForDelete(issue), []);
 
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
+//   const handleOnDragEnd = useCallback(
+//     async (result: DropResult) => {
+//       setTrashBox(false);
 
-  const handleDraftIssueClick = useCallback((issue: any) => setSelectedDraftIssue(issue), []);
-  const handleDraftIssueDelete = useCallback((issue: any) => setSelectDraftForDelete(issue), []);
+//       if (!result.destination || !workspaceSlug || !projectId || !groupedByIssues) return;
 
-  const handleOnDragEnd = useCallback(
-    async (result: DropResult) => {
-      setTrashBox(false);
+//       const { source, destination } = result;
 
-      if (!result.destination || !workspaceSlug || !projectId || !groupedByIssues) return;
+//       const draggedItem = groupedByIssues[source.droppableId][source.index];
 
-      const { source, destination } = result;
+//       if (destination.droppableId === "trashBox") {
+//         handleDeleteIssue(draggedItem);
+//       } else {
+//         if (displayFilters.order_by === "sort_order") {
+//           let newSortOrder = draggedItem.sort_order;
 
-      const draggedItem = groupedByIssues[source.droppableId][source.index];
+//           const destinationGroupArray = groupedByIssues[destination.droppableId];
 
-      if (destination.droppableId === "trashBox") {
-        handleDeleteIssue(draggedItem);
-      } else {
-        if (displayFilters.order_by === "sort_order") {
-          let newSortOrder = draggedItem.sort_order;
+//           if (destinationGroupArray.length !== 0) {
+//             // check if dropping in the same group
+//             if (source.droppableId === destination.droppableId) {
+//               // check if dropping at beginning
+//               if (destination.index === 0) newSortOrder = destinationGroupArray[0].sort_order - 10000;
+//               // check if dropping at last
+//               else if (destination.index === destinationGroupArray.length - 1)
+//                 newSortOrder = destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+//               else {
+//                 if (destination.index > source.index)
+//                   newSortOrder =
+//                     (destinationGroupArray[source.index + 1].sort_order +
+//                       destinationGroupArray[source.index + 2].sort_order) /
+//                     2;
+//                 else if (destination.index < source.index)
+//                   newSortOrder =
+//                     (destinationGroupArray[source.index - 1].sort_order +
+//                       destinationGroupArray[source.index - 2].sort_order) /
+//                     2;
+//               }
+//             } else {
+//               // check if dropping at beginning
+//               if (destination.index === 0) newSortOrder = destinationGroupArray[0].sort_order - 10000;
+//               // check if dropping at last
+//               else if (destination.index === destinationGroupArray.length)
+//                 newSortOrder = destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
+//               else
+//                 newSortOrder =
+//                   (destinationGroupArray[destination.index - 1].sort_order +
+//                     destinationGroupArray[destination.index].sort_order) /
+//                   2;
+//             }
+//           }
 
-          const destinationGroupArray = groupedByIssues[destination.droppableId];
+//           draggedItem.sort_order = newSortOrder;
+//         }
 
-          if (destinationGroupArray.length !== 0) {
-            // check if dropping in the same group
-            if (source.droppableId === destination.droppableId) {
-              // check if dropping at beginning
-              if (destination.index === 0)
-                newSortOrder = destinationGroupArray[0].sort_order - 10000;
-              // check if dropping at last
-              else if (destination.index === destinationGroupArray.length - 1)
-                newSortOrder =
-                  destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
-              else {
-                if (destination.index > source.index)
-                  newSortOrder =
-                    (destinationGroupArray[source.index + 1].sort_order +
-                      destinationGroupArray[source.index + 2].sort_order) /
-                    2;
-                else if (destination.index < source.index)
-                  newSortOrder =
-                    (destinationGroupArray[source.index - 1].sort_order +
-                      destinationGroupArray[source.index - 2].sort_order) /
-                    2;
-              }
-            } else {
-              // check if dropping at beginning
-              if (destination.index === 0)
-                newSortOrder = destinationGroupArray[0].sort_order - 10000;
-              // check if dropping at last
-              else if (destination.index === destinationGroupArray.length)
-                newSortOrder =
-                  destinationGroupArray[destinationGroupArray.length - 1].sort_order + 10000;
-              else
-                newSortOrder =
-                  (destinationGroupArray[destination.index - 1].sort_order +
-                    destinationGroupArray[destination.index].sort_order) /
-                  2;
-            }
-          }
+//         const destinationGroup = destination.droppableId; // destination group id
 
-          draggedItem.sort_order = newSortOrder;
-        }
+//         if (displayFilters.order_by === "sort_order" || source.droppableId !== destination.droppableId) {
+//           // different group/column;
 
-        const destinationGroup = destination.droppableId; // destination group id
+//           // source.droppableId !== destination.droppableId -> even if order by is not sort_order,
+//           // if the issue is moved to a different group, then we will change the group of the
+//           // dragged item(or issue)
 
-        if (
-          displayFilters.order_by === "sort_order" ||
-          source.droppableId !== destination.droppableId
-        ) {
-          // different group/column;
+//           if (displayFilters.group_by === "priority") draggedItem.priority = destinationGroup as TIssuePriorities;
+//           else if (displayFilters.group_by === "state") {
+//             draggedItem.state = destinationGroup;
+//             draggedItem.state_detail = states?.find((s) => s.id === destinationGroup) as IState;
+//           }
+//         }
 
-          // source.droppableId !== destination.droppableId -> even if order by is not sort_order,
-          // if the issue is moved to a different group, then we will change the group of the
-          // dragged item(or issue)
+//         const sourceGroup = source.droppableId; // source group id
 
-          if (displayFilters.group_by === "priority")
-            draggedItem.priority = destinationGroup as TIssuePriorities;
-          else if (displayFilters.group_by === "state") {
-            draggedItem.state = destinationGroup;
-            draggedItem.state_detail = states?.find((s) => s.id === destinationGroup) as IState;
-          }
-        }
+//         mutate<{
+//           [key: string]: IIssue[];
+//         }>(
+//           cycleId
+//             ? CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)
+//             : moduleId
+//             ? MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)
+//             : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params),
+//           (prevData) => {
+//             if (!prevData) return prevData;
 
-        const sourceGroup = source.droppableId; // source group id
+//             const sourceGroupArray = [...groupedByIssues[sourceGroup]];
+//             const destinationGroupArray = [...groupedByIssues[destinationGroup]];
 
-        mutate<{
-          [key: string]: IIssue[];
-        }>(
-          cycleId
-            ? CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)
-            : moduleId
-            ? MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)
-            : PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params),
-          (prevData) => {
-            if (!prevData) return prevData;
+//             sourceGroupArray.splice(source.index, 1);
+//             destinationGroupArray.splice(destination.index, 0, draggedItem);
 
-            const sourceGroupArray = [...groupedByIssues[sourceGroup]];
-            const destinationGroupArray = [...groupedByIssues[destinationGroup]];
+//             return {
+//               ...prevData,
+//               [sourceGroup]: orderArrayBy(sourceGroupArray, displayFilters.order_by ?? "-created_at"),
+//               [destinationGroup]: orderArrayBy(destinationGroupArray, displayFilters.order_by ?? "-created_at"),
+//             };
+//           },
+//           false
+//         );
 
-            sourceGroupArray.splice(source.index, 1);
-            destinationGroupArray.splice(destination.index, 0, draggedItem);
+//         // patch request
+//         issueService
+//           .patchIssue(
+//             workspaceSlug as string,
+//             projectId as string,
+//             draggedItem.id,
+//             {
+//               priority: draggedItem.priority,
+//               state: draggedItem.state,
+//               sort_order: draggedItem.sort_order,
+//             },
+//             user
+//           )
+//           .then((response) => {
+//             const sourceStateBeforeDrag = states?.find((state) => state.name === source.droppableId);
 
-            return {
-              ...prevData,
-              [sourceGroup]: orderArrayBy(
-                sourceGroupArray,
-                displayFilters.order_by ?? "-created_at"
-              ),
-              [destinationGroup]: orderArrayBy(
-                destinationGroupArray,
-                displayFilters.order_by ?? "-created_at"
-              ),
-            };
-          },
-          false
-        );
+//             if (sourceStateBeforeDrag?.group !== "completed" && response?.state_detail?.group === "completed")
+//               trackEventService.trackIssueMarkedAsDoneEvent(
+//                 {
+//                   workspaceSlug,
+//                   workspaceId: draggedItem.workspace,
+//                   projectName: draggedItem.project_detail.name,
+//                   projectIdentifier: draggedItem.project_detail.identifier,
+//                   projectId,
+//                   issueId: draggedItem.id,
+//                 },
+//                 user
+//               );
 
-        // patch request
-        issuesService
-          .patchIssue(
-            workspaceSlug as string,
-            projectId as string,
-            draggedItem.id,
-            {
-              priority: draggedItem.priority,
-              state: draggedItem.state,
-              sort_order: draggedItem.sort_order,
-            },
-            user
-          )
-          .then((response) => {
-            const sourceStateBeforeDrag = states?.find(
-              (state) => state.name === source.droppableId
-            );
+//             if (cycleId) {
+//               mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
+//               mutate(CYCLE_DETAILS(cycleId as string));
+//             }
+//             if (moduleId) {
+//               mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
+//               mutate(MODULE_DETAILS(moduleId as string));
+//             }
+//             mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
+//           });
+//       }
+//     },
+//     [
+//       displayFilters.group_by,
+//       displayFilters.order_by,
+//       workspaceSlug,
+//       cycleId,
+//       moduleId,
+//       groupedByIssues,
+//       projectId,
+//       handleDeleteIssue,
+//       params,
+//       states,
+//       user,
+//     ]
+//   );
 
-            if (
-              sourceStateBeforeDrag?.group !== "completed" &&
-              response?.state_detail?.group === "completed"
-            )
-              trackEventServices.trackIssueMarkedAsDoneEvent(
-                {
-                  workspaceSlug,
-                  workspaceId: draggedItem.workspace,
-                  projectName: draggedItem.project_detail.name,
-                  projectIdentifier: draggedItem.project_detail.identifier,
-                  projectId,
-                  issueId: draggedItem.id,
-                },
-                user
-              );
+//   const addIssueToGroup = useCallback(
+//     (groupTitle: string) => {
+//       setCreateIssueModal(true);
 
-            if (cycleId) {
-              mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
-              mutate(CYCLE_DETAILS(cycleId as string));
-            }
-            if (moduleId) {
-              mutate(MODULE_ISSUES_WITH_PARAMS(moduleId as string, params));
-              mutate(MODULE_DETAILS(moduleId as string));
-            }
-            mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
-          });
-      }
-    },
-    [
-      displayFilters.group_by,
-      displayFilters.order_by,
-      workspaceSlug,
-      cycleId,
-      moduleId,
-      groupedByIssues,
-      projectId,
-      handleDeleteIssue,
-      params,
-      states,
-      user,
-    ]
-  );
+//       let preloadedValue: string | string[] = groupTitle;
 
-  const addIssueToGroup = useCallback(
-    (groupTitle: string) => {
-      setCreateIssueModal(true);
+//       if (displayFilters.group_by === "labels") {
+//         if (groupTitle === "None") preloadedValue = [];
+//         else preloadedValue = [groupTitle];
+//       }
 
-      let preloadedValue: string | string[] = groupTitle;
+//       if (displayFilters.group_by)
+//         setPreloadedData({
+//           [displayFilters.group_by]: preloadedValue,
+//           actionType: "createIssue",
+//         });
+//       else setPreloadedData({ actionType: "createIssue" });
+//     },
+//     [displayFilters.group_by, setCreateIssueModal, setPreloadedData]
+//   );
 
-      if (displayFilters.group_by === "labels") {
-        if (groupTitle === "None") preloadedValue = [];
-        else preloadedValue = [groupTitle];
-      }
+//   const addIssueToDate = useCallback(
+//     (date: string) => {
+//       setCreateIssueModal(true);
+//       setPreloadedData({
+//         target_date: date,
+//         actionType: "createIssue",
+//       });
+//     },
+//     [setCreateIssueModal, setPreloadedData]
+//   );
 
-      if (displayFilters.group_by)
-        setPreloadedData({
-          [displayFilters.group_by]: preloadedValue,
-          actionType: "createIssue",
-        });
-      else setPreloadedData({ actionType: "createIssue" });
-    },
-    [displayFilters.group_by, setCreateIssueModal, setPreloadedData]
-  );
+//   const makeIssueCopy = useCallback(
+//     (issue: IIssue) => {
+//       setCreateIssueModal(true);
 
-  const addIssueToDate = useCallback(
-    (date: string) => {
-      setCreateIssueModal(true);
-      setPreloadedData({
-        target_date: date,
-        actionType: "createIssue",
-      });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
+//       setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
+//     },
+//     [setCreateIssueModal, setPreloadedData]
+//   );
 
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
+//   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]
+//   );
 
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
+//   const handleIssueAction = useCallback(
+//     (issue: IIssue, action: "copy" | "edit" | "delete") => {
+//       if (action === "copy") makeIssueCopy(issue);
+//       else if (action === "edit") handleEditIssue(issue);
+//       else if (action === "delete") handleDeleteIssue(issue);
+//     },
+//     [makeIssueCopy, handleEditIssue, handleDeleteIssue]
+//   );
 
-  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 handleDraftIssueAction = useCallback(
+//     (issue: IIssue, action: "edit" | "delete") => {
+//       if (action === "edit") handleDraftIssueClick(issue);
+//       else if (action === "delete") handleDraftIssueDelete(issue);
+//     },
+//     [handleDraftIssueClick, handleDraftIssueDelete]
+//   );
 
-  const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete") => {
-      if (action === "copy") makeIssueCopy(issue);
-      else if (action === "edit") handleEditIssue(issue);
-      else if (action === "delete") handleDeleteIssue(issue);
-    },
-    [makeIssueCopy, handleEditIssue, handleDeleteIssue]
-  );
+//   const removeIssueFromCycle = useCallback(
+//     (bridgeId: string, issueId: string) => {
+//       if (!workspaceSlug || !projectId || !cycleId) return;
 
-  const handleDraftIssueAction = useCallback(
-    (issue: IIssue, action: "edit" | "delete") => {
-      if (action === "edit") handleDraftIssueClick(issue);
-      else if (action === "delete") handleDraftIssueDelete(issue);
-    },
-    [handleDraftIssueClick, handleDraftIssueDelete]
-  );
+//       mutate(
+//         CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params),
+//         (prevData: any) => {
+//           if (!prevData) return prevData;
+//           if (displayFilters.group_by) {
+//             const filteredData: any = {};
+//             for (const key in prevData) {
+//               filteredData[key] = prevData[key].filter((item: any) => item.id !== issueId);
+//             }
+//             return filteredData;
+//           } else {
+//             const filteredData = prevData.filter((i: any) => i.id !== issueId);
+//             return filteredData;
+//           }
+//         },
+//         false
+//       );
 
-  const removeIssueFromCycle = useCallback(
-    (bridgeId: string, issueId: string) => {
-      if (!workspaceSlug || !projectId || !cycleId) return;
+//       issueService
+//         .removeIssueFromCycle(workspaceSlug as string, projectId as string, cycleId as string, bridgeId)
+//         .then(() => {
+//           setToastAlert({
+//             title: "Success",
+//             message: "Issue removed successfully.",
+//             type: "success",
+//           });
+//         })
+//         .catch((e) => {
+//           console.log(e);
+//         });
+//     },
+//     [displayFilters.group_by, workspaceSlug, projectId, cycleId, params, setToastAlert]
+//   );
 
-      mutate(
-        CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params),
-        (prevData: any) => {
-          if (!prevData) return prevData;
-          if (displayFilters.group_by) {
-            const filteredData: any = {};
-            for (const key in prevData) {
-              filteredData[key] = prevData[key].filter((item: any) => item.id !== issueId);
-            }
-            return filteredData;
-          } else {
-            const filteredData = prevData.filter((i: any) => i.id !== issueId);
-            return filteredData;
-          }
-        },
-        false
-      );
+//   const removeIssueFromModule = useCallback(
+//     (bridgeId: string, issueId: string) => {
+//       if (!workspaceSlug || !projectId || !moduleId) return;
 
-      issuesService
-        .removeIssueFromCycle(
-          workspaceSlug as string,
-          projectId as string,
-          cycleId as string,
-          bridgeId
-        )
-        .then(() => {
-          setToastAlert({
-            title: "Success",
-            message: "Issue removed successfully.",
-            type: "success",
-          });
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-    },
-    [displayFilters.group_by, workspaceSlug, projectId, cycleId, params, setToastAlert]
-  );
+//       mutate(
+//         MODULE_ISSUES_WITH_PARAMS(moduleId as string, params),
+//         (prevData: any) => {
+//           if (!prevData) return prevData;
+//           if (displayFilters.group_by) {
+//             const filteredData: any = {};
+//             for (const key in prevData) {
+//               filteredData[key] = prevData[key].filter((item: any) => item.id !== issueId);
+//             }
+//             return filteredData;
+//           } else {
+//             const filteredData = prevData.filter((item: any) => item.id !== issueId);
+//             return filteredData;
+//           }
+//         },
+//         false
+//       );
 
-  const removeIssueFromModule = useCallback(
-    (bridgeId: string, issueId: string) => {
-      if (!workspaceSlug || !projectId || !moduleId) return;
+//       moduleService
+//         .removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId as string, bridgeId)
+//         .then(() => {
+//           setToastAlert({
+//             title: "Success",
+//             message: "Issue removed successfully.",
+//             type: "success",
+//           });
+//         })
+//         .catch((e) => {
+//           console.log(e);
+//         });
+//     },
+//     [displayFilters.group_by, workspaceSlug, projectId, moduleId, params, setToastAlert]
+//   );
 
-      mutate(
-        MODULE_ISSUES_WITH_PARAMS(moduleId as string, params),
-        (prevData: any) => {
-          if (!prevData) return prevData;
-          if (displayFilters.group_by) {
-            const filteredData: any = {};
-            for (const key in prevData) {
-              filteredData[key] = prevData[key].filter((item: any) => item.id !== issueId);
-            }
-            return filteredData;
-          } else {
-            const filteredData = prevData.filter((item: any) => item.id !== issueId);
-            return filteredData;
-          }
-        },
-        false
-      );
+//   const nullFilters = Object.keys(filters).filter((key) => filters[key as keyof IIssueFilterOptions] === null);
 
-      modulesService
-        .removeIssueFromModule(
-          workspaceSlug as string,
-          projectId as string,
-          moduleId as string,
-          bridgeId
-        )
-        .then(() => {
-          setToastAlert({
-            title: "Success",
-            message: "Issue removed successfully.",
-            type: "success",
-          });
-        })
-        .catch((e) => {
-          console.log(e);
-        });
-    },
-    [displayFilters.group_by, workspaceSlug, projectId, moduleId, params, setToastAlert]
-  );
+//   const areFiltersApplied = Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length;
 
-  const nullFilters = Object.keys(filters).filter(
-    (key) => filters[key as keyof IIssueFilterOptions] === null
-  );
+//   return (
+//     <>
+//       <CreateUpdateViewModal
+//         isOpen={createViewModal !== null}
+//         handleClose={() => setCreateViewModal(null)}
+//         preLoadedData={createViewModal}
+//         user={user}
+//       />
+//       <CreateUpdateIssueModal
+//         isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
+//         handleClose={() => setCreateIssueModal(false)}
+//         prePopulateData={{
+//           ...preloadedData,
+//         }}
+//       />
+//       <CreateUpdateDraftIssueModal
+//         isOpen={selectedDraftIssue !== null}
+//         handleClose={() => setSelectedDraftIssue(null)}
+//         data={
+//           selectedDraftIssue
+//             ? {
+//                 ...selectedDraftIssue,
+//                 is_draft: true,
+//               }
+//             : null
+//         }
+//         fieldsToShow={["all"]}
+//       />
+//       <CreateUpdateIssueModal
+//         isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
+//         handleClose={() => setEditIssueModal(false)}
+//         data={issueToEdit}
+//       />
+//       <DeleteIssueModal
+//         handleClose={() => setDeleteIssueModal(false)}
+//         isOpen={deleteIssueModal}
+//         data={issueToDelete}
+//         user={user}
+//       />
+//       <DeleteDraftIssueModal
+//         data={selectedDraftForDelete}
+//         isOpen={selectedDraftForDelete !== null}
+//         handleClose={() => setSelectDraftForDelete(null)}
+//       />
 
-  const areFiltersApplied =
-    Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length;
+//       {areFiltersApplied && (
+//         <>
+//           <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
+//             <FiltersList
+//               filters={filters}
+//               setFilters={(updatedFilter) => setFilters(updatedFilter, !Boolean(viewId))}
+//               labels={labels}
+//               members={members?.map((m: any) => m.member)}
+//               states={states}
+//               clearAllFilters={() =>
+//                 setFilters({
+//                   assignees: null,
+//                   created_by: null,
+//                   labels: null,
+//                   priority: null,
+//                   state: null,
+//                   state_group: null,
+//                   start_date: null,
+//                   target_date: null,
+//                 })
+//               }
+//             />
+//             <Button
+//               variant="primary"
+//               prependIcon={!viewId && <PlusIcon />}
+//               onClick={() => {
+//                 if (viewId) {
+//                   setFilters({}, true);
+//                   setToastAlert({
+//                     title: "View updated",
+//                     message: "Your view has been updated",
+//                     type: "success",
+//                   });
+//                 } else
+//                   setCreateViewModal({
+//                     query: filters,
+//                   });
+//               }}
+//             >
+//               {viewId ? "Update" : "Save"} view
+//             </Button>
+//           </div>
+//           {<div className="mt-3 border-t border-custom-border-200" />}
+//         </>
+//       )}
+//       {/* <AllViews
+//         addIssueToDate={addIssueToDate}
+//         addIssueToGroup={addIssueToGroup}
+//         disableUserActions={disableUserActions}
+//         dragDisabled={
+//           displayFilters.group_by === "created_by" ||
+//           displayFilters.group_by === "labels" ||
+//           displayFilters.group_by === "state_detail.group" ||
+//           displayFilters.group_by === "assignees"
+//         }
+//         emptyState={{
+//           title: isDraftIssues
+//             ? "Draft issues will appear here"
+//             : cycleId
+//             ? "Cycle issues will appear here"
+//             : moduleId
+//             ? "Module issues will appear here"
+//             : "Project issues will appear here",
+//           description: isDraftIssues
+//             ? "Draft issues are issues that are not yet created."
+//             : "Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done.",
+//           primaryButton: !isDraftIssues
+//             ? {
+//                 icon: <PlusIcon className="h-4 w-4" />,
+//                 text: "New Issue",
+//                 onClick: () => {
+//                   const e = new KeyboardEvent("keydown", {
+//                     key: "c",
+//                   });
+//                   document.dispatchEvent(e);
+//                 },
+//               }
+//             : undefined,
+//           secondaryButton:
+//             cycleId || moduleId ? (
+//               <Button variant="neutral-primary" prependIcon={<PlusIcon />} onClick={openIssuesListModal ?? (() => {})}>
+//                 Add an existing issue
+//               </Button>
+//             ) : null,
+//         }}
+//         handleOnDragEnd={handleOnDragEnd}
+//         handleIssueAction={handleIssueAction}
+//         handleDraftIssueAction={handleDraftIssueAction}
+//         openIssuesListModal={openIssuesListModal ?? null}
+//         removeIssue={cycleId ? removeIssueFromCycle : moduleId ? removeIssueFromModule : null}
+//         trashBox={trashBox}
+//         setTrashBox={setTrashBox}
+//         viewProps={{
+//           groupedIssues: groupedByIssues,
+//           displayFilters,
+//           isEmpty,
+//           mutateIssues,
+//           params,
+//           properties,
+//         }}
+//         disableAddIssueOption={isArchivedIssues}
+//       /> */}
+//     </>
+//   );
+// };
 
-  return (
-    <>
-      <CreateUpdateViewModal
-        isOpen={createViewModal !== null}
-        handleClose={() => setCreateViewModal(null)}
-        preLoadedData={createViewModal}
-        user={user}
-      />
-      <CreateUpdateIssueModal
-        isOpen={createIssueModal && preloadedData?.actionType === "createIssue"}
-        handleClose={() => setCreateIssueModal(false)}
-        prePopulateData={{
-          ...preloadedData,
-        }}
-      />
-      <CreateUpdateDraftIssueModal
-        isOpen={selectedDraftIssue !== null}
-        handleClose={() => setSelectedDraftIssue(null)}
-        data={
-          selectedDraftIssue
-            ? {
-                ...selectedDraftIssue,
-                is_draft: true,
-              }
-            : null
-        }
-        fieldsToShow={["all"]}
-      />
-      <CreateUpdateIssueModal
-        isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
-        handleClose={() => setEditIssueModal(false)}
-        data={issueToEdit}
-      />
-      <DeleteIssueModal
-        handleClose={() => setDeleteIssueModal(false)}
-        isOpen={deleteIssueModal}
-        data={issueToDelete}
-        user={user}
-      />
-      <DeleteDraftIssueModal
-        data={selectedDraftForDelete}
-        isOpen={selectedDraftForDelete !== null}
-        handleClose={() => setSelectDraftForDelete(null)}
-      />
-
-      {areFiltersApplied && (
-        <>
-          <div className="flex items-center justify-between gap-2 px-5 pt-3 pb-0">
-            <FiltersList
-              filters={filters}
-              setFilters={(updatedFilter) => setFilters(updatedFilter, !Boolean(viewId))}
-              labels={labels}
-              members={members?.map((m) => m.member)}
-              states={states}
-              clearAllFilters={() =>
-                setFilters({
-                  assignees: null,
-                  created_by: null,
-                  labels: null,
-                  priority: null,
-                  state: null,
-                  start_date: null,
-                  target_date: null,
-                })
-              }
-            />
-            <PrimaryButton
-              onClick={() => {
-                if (viewId) {
-                  setFilters({}, true);
-                  setToastAlert({
-                    title: "View updated",
-                    message: "Your view has been updated",
-                    type: "success",
-                  });
-                } else
-                  setCreateViewModal({
-                    query: filters,
-                  });
-              }}
-              className="flex items-center gap-2 text-sm"
-            >
-              {!viewId && <PlusIcon className="h-4 w-4" />}
-              {viewId ? "Update" : "Save"} view
-            </PrimaryButton>
-          </div>
-          {<div className="mt-3 border-t border-custom-border-200" />}
-        </>
-      )}
-      <AllViews
-        addIssueToDate={addIssueToDate}
-        addIssueToGroup={addIssueToGroup}
-        disableUserActions={disableUserActions}
-        dragDisabled={
-          displayFilters.group_by === "created_by" ||
-          displayFilters.group_by === "labels" ||
-          displayFilters.group_by === "state_detail.group" ||
-          displayFilters.group_by === "assignees"
-        }
-        emptyState={{
-          title: isDraftIssues
-            ? "Draft issues will appear here"
-            : cycleId
-            ? "Cycle issues will appear here"
-            : moduleId
-            ? "Module issues will appear here"
-            : "Project issues will appear here",
-          description: isDraftIssues
-            ? "Draft issues are issues that are not yet created."
-            : "Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done.",
-          primaryButton: !isDraftIssues
-            ? {
-                icon: <PlusIcon className="h-4 w-4" />,
-                text: "New Issue",
-                onClick: () => {
-                  const e = new KeyboardEvent("keydown", {
-                    key: "c",
-                  });
-                  document.dispatchEvent(e);
-                },
-              }
-            : undefined,
-          secondaryButton:
-            cycleId || moduleId ? (
-              <SecondaryButton
-                className="flex items-center gap-1.5"
-                onClick={openIssuesListModal ?? (() => {})}
-              >
-                <PlusIcon className="h-4 w-4" />
-                Add an existing issue
-              </SecondaryButton>
-            ) : null,
-        }}
-        handleOnDragEnd={handleOnDragEnd}
-        handleIssueAction={handleIssueAction}
-        handleDraftIssueAction={handleDraftIssueAction}
-        openIssuesListModal={openIssuesListModal ?? null}
-        removeIssue={cycleId ? removeIssueFromCycle : moduleId ? removeIssueFromModule : null}
-        trashBox={trashBox}
-        setTrashBox={setTrashBox}
-        viewProps={{
-          groupedIssues: groupedByIssues,
-          displayFilters,
-          isEmpty,
-          mutateIssues,
-          params,
-          properties,
-        }}
-        disableAddIssueOption={isArchivedIssues}
-      />
-    </>
-  );
-};
+export const IssuesView = () => <></>;
diff --git a/web/components/core/views/list-view/all-lists.tsx b/web/components/core/views/list-view/all-lists.tsx
deleted file mode 100644
index 58025b328..000000000
--- a/web/components/core/views/list-view/all-lists.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { useRouter } from "next/router";
-
-// hooks
-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 { SingleList } from "components/core/views/list-view/single-list";
-import { IssuePeekOverview } from "components/issues";
-// types
-import { ICurrentUserResponse, IIssue, IIssueViewProps, IState, UserAuth } from "types";
-
-// types
-type Props = {
-  states: IState[] | undefined;
-  addIssueToGroup: (groupTitle: string) => void;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
-  handleDraftIssueAction?: (issue: IIssue, action: "edit" | "delete") => void;
-  openIssuesListModal?: (() => void) | null;
-  myIssueProjectId?: string | null;
-  handleMyIssueOpen?: (issue: IIssue) => void;
-  removeIssue: ((bridgeId: string, issueId: string) => void) | null;
-  disableUserActions: boolean;
-  disableAddIssueOption?: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-  viewProps: IIssueViewProps;
-};
-
-export const AllLists: React.FC<Props> = ({
-  addIssueToGroup,
-  handleIssueAction,
-  disableUserActions,
-  disableAddIssueOption = false,
-  openIssuesListModal,
-  handleMyIssueOpen,
-  myIssueProjectId,
-  removeIssue,
-  states,
-  handleDraftIssueAction,
-  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="h-full overflow-y-auto">
-          {Object.keys(groupedIssues).map((singleGroup) => {
-            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 (
-              <SingleList
-                key={singleGroup}
-                groupTitle={singleGroup}
-                currentState={currentState}
-                addIssueToGroup={() => addIssueToGroup(singleGroup)}
-                handleDraftIssueAction={handleDraftIssueAction}
-                handleIssueAction={handleIssueAction}
-                handleMyIssueOpen={handleMyIssueOpen}
-                openIssuesListModal={openIssuesListModal}
-                removeIssue={removeIssue}
-                disableUserActions={disableUserActions}
-                disableAddIssueOption={disableAddIssueOption}
-                user={user}
-                userAuth={userAuth}
-                viewProps={viewProps}
-              />
-            );
-          })}
-        </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 4d59be165..000000000
--- 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 b61420fc8..000000000
--- 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 7fa54b852..000000000
--- 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 b972313f3..000000000
--- a/web/components/core/views/list-view/single-list.tsx
+++ /dev/null
@@ -1,377 +0,0 @@
-import { useState } from "react";
-
-// next
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// services
-import issuesService from "services/issues.service";
-import projectService from "services/project.service";
-// 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 {
-  ICurrentUserResponse,
-  IIssue,
-  IIssueLabels,
-  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: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
-  viewProps: IIssueViewProps;
-};
-
-export const SingleList: React.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"
-      ? () => 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 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/core/views/spreadsheet-view/assignee-column/assignee-column.tsx b/web/components/core/views/spreadsheet-view/assignee-column/assignee-column.tsx
index 745083d5f..1685657cf 100644
--- a/web/components/core/views/spreadsheet-view/assignee-column/assignee-column.tsx
+++ b/web/components/core/views/spreadsheet-view/assignee-column/assignee-column.tsx
@@ -1,31 +1,24 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 // components
 import { MembersSelect } from "components/project";
 // services
-import trackEventServices from "services/track-event.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
   projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  onChange: (formData: Partial<IIssue>) => void;
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
-export const AssigneeColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
+const trackEventService = new TrackEventService();
+
+export const AssigneeColumn: React.FC<Props> = ({ issue, projectId, onChange, properties, user, isNotAllowed }) => {
   const router = useRouter();
 
   const { workspaceSlug } = router.query;
@@ -36,9 +29,9 @@ export const AssigneeColumn: React.FC<Props> = ({
     if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
     else newData.push(data);
 
-    partialUpdateIssue({ assignees_list: data }, issue);
+    onChange({ assignees_list: data });
 
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -48,7 +41,7 @@ export const AssigneeColumn: React.FC<Props> = ({
         issueId: issue.id,
       },
       "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
-      user
+      user as IUser
     );
   };
 
diff --git a/web/components/core/views/spreadsheet-view/assignee-column/spreadsheet-assignee-column.tsx b/web/components/core/views/spreadsheet-view/assignee-column/spreadsheet-assignee-column.tsx
index a864126c6..8d34a8a42 100644
--- a/web/components/core/views/spreadsheet-view/assignee-column/spreadsheet-assignee-column.tsx
+++ b/web/components/core/views/spreadsheet-view/assignee-column/spreadsheet-assignee-column.tsx
@@ -5,22 +5,22 @@ import { AssigneeColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
   projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  handleUpdateIssue: (issueId: string, data: Partial<IIssue>) => void;
   expandedIssues: string[];
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
 export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
   issue,
   projectId,
-  partialUpdateIssue,
+  handleUpdateIssue,
   expandedIssues,
   properties,
   user,
@@ -36,7 +36,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
         issue={issue}
         projectId={projectId}
         properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
+        onChange={(data) => handleUpdateIssue(issue.id, data)}
         user={user}
         isNotAllowed={isNotAllowed}
       />
@@ -50,7 +50,7 @@ export const SpreadsheetAssigneeColumn: React.FC<Props> = ({
             key={subIssue.id}
             issue={subIssue}
             projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
+            handleUpdateIssue={handleUpdateIssue}
             expandedIssues={expandedIssues}
             properties={properties}
             user={user}
diff --git a/web/components/core/views/spreadsheet-view/created-on-column/created-on-column.tsx b/web/components/core/views/spreadsheet-view/created-on-column/created-on-column.tsx
index cff1f99aa..12c33abfc 100644
--- a/web/components/core/views/spreadsheet-view/created-on-column/created-on-column.tsx
+++ b/web/components/core/views/spreadsheet-view/created-on-column/created-on-column.tsx
@@ -1,27 +1,16 @@
 import React from "react";
 
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IIssue, Properties } from "types";
 // helper
 import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 
 type Props = {
   issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
-  isNotAllowed: boolean;
 };
 
-export const CreatedOnColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => (
+export const CreatedOnColumn: React.FC<Props> = ({ issue, properties }) => (
   <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
     <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
       {properties.created_on && (
diff --git a/web/components/core/views/spreadsheet-view/created-on-column/spreadsheet-created-on-column.tsx b/web/components/core/views/spreadsheet-view/created-on-column/spreadsheet-created-on-column.tsx
index 3ce3f2dbe..cf52091e6 100644
--- a/web/components/core/views/spreadsheet-view/created-on-column/spreadsheet-created-on-column.tsx
+++ b/web/components/core/views/spreadsheet-view/created-on-column/spreadsheet-created-on-column.tsx
@@ -5,22 +5,20 @@ import { CreatedOnColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
-  projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  handleUpdateIssue: (formData: Partial<IIssue>) => void;
   expandedIssues: string[];
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
 export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
   issue,
-  projectId,
-  partialUpdateIssue,
+  handleUpdateIssue,
   expandedIssues,
   properties,
   user,
@@ -32,14 +30,7 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
 
   return (
     <div>
-      <CreatedOnColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
+      <CreatedOnColumn issue={issue} properties={properties} />
 
       {isExpanded &&
         !isLoading &&
@@ -49,8 +40,7 @@ export const SpreadsheetCreatedOnColumn: React.FC<Props> = ({
           <SpreadsheetCreatedOnColumn
             key={subIssue.id}
             issue={subIssue}
-            projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
+            handleUpdateIssue={handleUpdateIssue}
             expandedIssues={expandedIssues}
             properties={properties}
             user={user}
diff --git a/web/components/core/views/spreadsheet-view/due-date-column/due-date-column.tsx b/web/components/core/views/spreadsheet-view/due-date-column/due-date-column.tsx
index e2d09ae0a..3c07b0632 100644
--- a/web/components/core/views/spreadsheet-view/due-date-column/due-date-column.tsx
+++ b/web/components/core/views/spreadsheet-view/due-date-column/due-date-column.tsx
@@ -1,38 +1,33 @@
-import React from "react";
-
+import { FC } from "react";
 // components
 import { ViewDueDateSelect } from "components/issues";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
   projectId: string;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
-export const DueDateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => (
-  <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-      {properties.due_date && (
-        <ViewDueDateSelect
-          issue={issue}
-          partialUpdateIssue={partialUpdateIssue}
-          noBorder
-          user={user}
-          isNotAllowed={isNotAllowed}
-        />
-      )}
-    </span>
-  </div>
-);
+export const DueDateColumn: FC<Props> = (props) => {
+  const { issue, partialUpdateIssue, properties, user, isNotAllowed } = props;
+  return (
+    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
+      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+        {properties.due_date && user && (
+          <ViewDueDateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            noBorder
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        )}
+      </span>
+    </div>
+  );
+};
diff --git a/web/components/core/views/spreadsheet-view/due-date-column/spreadsheet-due-date-column.tsx b/web/components/core/views/spreadsheet-view/due-date-column/spreadsheet-due-date-column.tsx
index 1cd2eac26..2187cf02d 100644
--- a/web/components/core/views/spreadsheet-view/due-date-column/spreadsheet-due-date-column.tsx
+++ b/web/components/core/views/spreadsheet-view/due-date-column/spreadsheet-due-date-column.tsx
@@ -5,7 +5,7 @@ import { DueDateColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
@@ -13,7 +13,7 @@ type Props = {
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   expandedIssues: string[];
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
diff --git a/web/components/core/views/spreadsheet-view/estimate-column/estimate-column.tsx b/web/components/core/views/spreadsheet-view/estimate-column/estimate-column.tsx
index bb44cefa3..4f43d572f 100644
--- a/web/components/core/views/spreadsheet-view/estimate-column/estimate-column.tsx
+++ b/web/components/core/views/spreadsheet-view/estimate-column/estimate-column.tsx
@@ -1,38 +1,34 @@
-import React from "react";
-
+import { FC } from "react";
 // components
 import { ViewEstimateSelect } from "components/issues";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
   projectId: string;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
-export const EstimateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => (
-  <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-      {properties.estimate && (
-        <ViewEstimateSelect
-          issue={issue}
-          partialUpdateIssue={partialUpdateIssue}
-          position="left"
-          user={user}
-          isNotAllowed={isNotAllowed}
-        />
-      )}
-    </span>
-  </div>
-);
+export const EstimateColumn: FC<Props> = (props) => {
+  const { issue, partialUpdateIssue, properties, user, isNotAllowed } = props;
+
+  return (
+    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
+      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+        {properties.estimate && (
+          <ViewEstimateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            position="left"
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        )}
+      </span>
+    </div>
+  );
+};
diff --git a/web/components/core/views/spreadsheet-view/estimate-column/spreadsheet-estimate-column.tsx b/web/components/core/views/spreadsheet-view/estimate-column/spreadsheet-estimate-column.tsx
index a1cc74ad0..7ff76f67d 100644
--- a/web/components/core/views/spreadsheet-view/estimate-column/spreadsheet-estimate-column.tsx
+++ b/web/components/core/views/spreadsheet-view/estimate-column/spreadsheet-estimate-column.tsx
@@ -5,7 +5,7 @@ import { EstimateColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
@@ -13,7 +13,7 @@ type Props = {
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   expandedIssues: string[];
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
diff --git a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx b/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
index c00f085b2..7d93f8098 100644
--- a/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
+++ b/web/components/core/views/spreadsheet-view/issue-column/issue-column.tsx
@@ -6,16 +6,11 @@ import { useRouter } from "next/router";
 import { Popover2 } from "@blueprintjs/popover2";
 // icons
 import { Icon } from "components/ui";
-import {
-  EllipsisHorizontalIcon,
-  LinkIcon,
-  PencilIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 // hooks
 import useToast from "hooks/use-toast";
 // types
-import { IIssue, Properties, UserAuth } from "types";
+import { IIssue, Properties } from "types";
 // helper
 import { copyTextToClipboard } from "helpers/string.helper";
 
@@ -29,7 +24,6 @@ type Props = {
   handleDeleteIssue: (issue: IIssue) => void;
   setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
   disableUserActions: boolean;
-  userAuth: UserAuth;
   nestingLevel: number;
 };
 
@@ -43,7 +37,6 @@ export const IssueColumn: React.FC<Props> = ({
   handleDeleteIssue,
   setCurrentProjectId,
   disableUserActions,
-  userAuth,
   nestingLevel,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
@@ -64,11 +57,8 @@ export const IssueColumn: React.FC<Props> = ({
   };
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
+    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!",
@@ -79,8 +69,6 @@ export const IssueColumn: React.FC<Props> = ({
 
   const paddingLeft = `${nestingLevel * 54}px`;
 
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
-
   return (
     <div className="group flex items-center w-[28rem] text-sm h-11 sticky top-0 bg-custom-background-100 truncate border-b border-r border-custom-border-100">
       {properties.key && (
@@ -93,7 +81,7 @@ export const IssueColumn: React.FC<Props> = ({
               {issue.project_detail?.identifier}-{issue.sequence_id}
             </span>
 
-            {!isNotAllowed && !disableUserActions && (
+            {!disableUserActions && (
               <div className="absolute top-0 left-2.5 opacity-0 group-hover:opacity-100">
                 <Popover2
                   isOpen={isOpen}
diff --git a/web/components/core/views/spreadsheet-view/issue-column/spreadsheet-issue-column.tsx b/web/components/core/views/spreadsheet-view/issue-column/spreadsheet-issue-column.tsx
index 966852a5b..2ba00d903 100644
--- a/web/components/core/views/spreadsheet-view/issue-column/spreadsheet-issue-column.tsx
+++ b/web/components/core/views/spreadsheet-view/issue-column/spreadsheet-issue-column.tsx
@@ -5,7 +5,7 @@ import { IssueColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { IIssue, Properties, UserAuth } from "types";
+import { IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
@@ -16,7 +16,6 @@ type Props = {
   handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
   setCurrentProjectId: React.Dispatch<React.SetStateAction<string | null>>;
   disableUserActions: boolean;
-  userAuth: UserAuth;
   nestingLevel?: number;
 };
 
@@ -29,7 +28,6 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
   handleIssueAction,
   setCurrentProjectId,
   disableUserActions,
-  userAuth,
   nestingLevel = 0,
 }) => {
   const handleToggleExpand = (issueId: string) => {
@@ -61,7 +59,6 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
         handleDeleteIssue={() => handleIssueAction(issue, "delete")}
         setCurrentProjectId={setCurrentProjectId}
         disableUserActions={disableUserActions}
-        userAuth={userAuth}
         nestingLevel={nestingLevel}
       />
 
@@ -80,7 +77,6 @@ export const SpreadsheetIssuesColumn: React.FC<Props> = ({
             handleIssueAction={handleIssueAction}
             setCurrentProjectId={setCurrentProjectId}
             disableUserActions={disableUserActions}
-            userAuth={userAuth}
             nestingLevel={nestingLevel + 1}
           />
         ))}
diff --git a/web/components/core/views/spreadsheet-view/label-column/label-column.tsx b/web/components/core/views/spreadsheet-view/label-column/label-column.tsx
index 1d1355eec..e626cc42a 100644
--- a/web/components/core/views/spreadsheet-view/label-column/label-column.tsx
+++ b/web/components/core/views/spreadsheet-view/label-column/label-column.tsx
@@ -3,14 +3,14 @@ import React from "react";
 // components
 import { LabelSelect } from "components/project";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
   projectId: string;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
diff --git a/web/components/core/views/spreadsheet-view/label-column/spreadsheet-label-column.tsx b/web/components/core/views/spreadsheet-view/label-column/spreadsheet-label-column.tsx
index 5ab77e909..fbf4e9458 100644
--- a/web/components/core/views/spreadsheet-view/label-column/spreadsheet-label-column.tsx
+++ b/web/components/core/views/spreadsheet-view/label-column/spreadsheet-label-column.tsx
@@ -5,7 +5,7 @@ import { LabelColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
@@ -13,7 +13,7 @@ type Props = {
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   expandedIssues: string[];
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
diff --git a/web/components/core/views/spreadsheet-view/priority-column/priority-column.tsx b/web/components/core/views/spreadsheet-view/priority-column/priority-column.tsx
index eca140df1..75e7ee0ac 100644
--- a/web/components/core/views/spreadsheet-view/priority-column/priority-column.tsx
+++ b/web/components/core/views/spreadsheet-view/priority-column/priority-column.tsx
@@ -1,38 +1,32 @@
-import React from "react";
-
+import { FC } from "react";
 import { useRouter } from "next/router";
-
 // components
 import { PrioritySelect } from "components/project";
 // services
-import trackEventServices from "services/track-event.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import { ICurrentUserResponse, IIssue, Properties, TIssuePriorities } from "types";
+import { IUser, IIssue, Properties, TIssuePriorities } from "types";
 
 type Props = {
   issue: IIssue;
   projectId: string;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
-export const PriorityColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
-  const router = useRouter();
+const trackEventService = new TrackEventService();
 
+export const PriorityColumn: FC<Props> = (props) => {
+  const { issue, partialUpdateIssue, properties, user, isNotAllowed } = props;
+  // router
+  const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const handlePriorityChange = (data: TIssuePriorities) => {
     partialUpdateIssue({ priority: data }, issue);
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -42,7 +36,7 @@ export const PriorityColumn: React.FC<Props> = ({
         issueId: issue.id,
       },
       "ISSUE_PROPERTY_UPDATE_PRIORITY",
-      user
+      user as IUser
     );
   };
 
diff --git a/web/components/core/views/spreadsheet-view/priority-column/spreadsheet-priority-column.tsx b/web/components/core/views/spreadsheet-view/priority-column/spreadsheet-priority-column.tsx
index f0b84fb59..39f88fd26 100644
--- a/web/components/core/views/spreadsheet-view/priority-column/spreadsheet-priority-column.tsx
+++ b/web/components/core/views/spreadsheet-view/priority-column/spreadsheet-priority-column.tsx
@@ -5,7 +5,7 @@ import { PriorityColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
@@ -13,7 +13,7 @@ type Props = {
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   expandedIssues: string[];
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
diff --git a/web/components/core/views/spreadsheet-view/single-issue.tsx b/web/components/core/views/spreadsheet-view/single-issue.tsx
index 32cb4ba77..b06ffad1b 100644
--- a/web/components/core/views/spreadsheet-view/single-issue.tsx
+++ b/web/components/core/views/spreadsheet-view/single-issue.tsx
@@ -1,28 +1,17 @@
-import React, { useCallback, useState } from "react";
-
+import { FC, useCallback, useState } from "react";
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
+import { Popover2 } from "@blueprintjs/popover2";
 // components
 import { ViewDueDateSelect, ViewEstimateSelect, ViewStartDateSelect } from "components/issues";
 import { LabelSelect, MembersSelect, PrioritySelect } from "components/project";
 import { StateSelect } from "components/states";
-import { Popover2 } from "@blueprintjs/popover2";
 // icons
 import { Icon } from "components/ui";
-import {
-  EllipsisHorizontalIcon,
-  LinkIcon,
-  PencilIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-// hooks
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
-import useToast from "hooks/use-toast";
+import { EllipsisHorizontalIcon, LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 // services
-import issuesService from "services/issues.service";
-import trackEventServices from "services/track-event.service";
+import { IssueService } from "services/issue";
+import { TrackEventService } from "services/track_event.service";
 // constant
 import {
   CYCLE_DETAILS,
@@ -34,18 +23,12 @@ import {
   VIEW_ISSUES,
 } from "constants/fetch-keys";
 // types
-import {
-  ICurrentUserResponse,
-  IIssue,
-  IState,
-  ISubIssueResponse,
-  Properties,
-  TIssuePriorities,
-  UserAuth,
-} from "types";
+import { IUser, IIssue, IState, ISubIssueResponse, Properties, TIssuePriorities, UserAuth } from "types";
 // helper
 import { copyTextToClipboard } from "helpers/string.helper";
 import { renderLongDetailDateFormat } from "helpers/date-time.helper";
+// hooks
+import useToast from "hooks/use-toast";
 
 type Props = {
   issue: IIssue;
@@ -58,33 +41,37 @@ type Props = {
   handleDeleteIssue: (issue: IIssue) => void;
   gridTemplateColumns: string;
   disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   userAuth: UserAuth;
   nestingLevel: number;
 };
 
-export const SingleSpreadsheetIssue: React.FC<Props> = ({
-  issue,
-  projectId,
-  index,
-  expanded,
-  handleToggleExpand,
-  properties,
-  handleEditIssue,
-  handleDeleteIssue,
-  gridTemplateColumns,
-  disableUserActions,
-  user,
-  userAuth,
-  nestingLevel,
-}) => {
+const issueService = new IssueService();
+const trackEventService = new TrackEventService();
+
+export const SingleSpreadsheetIssue: FC<Props> = (props) => {
+  const {
+    issue,
+    projectId,
+    index,
+    expanded,
+    handleToggleExpand,
+    properties,
+    handleEditIssue,
+    handleDeleteIssue,
+    gridTemplateColumns,
+    disableUserActions,
+    user,
+    userAuth,
+    nestingLevel,
+  } = props;
+  // states
   const [isOpen, setIsOpen] = useState(false);
-
+  // router
   const router = useRouter();
-
   const { workspaceSlug, cycleId, moduleId, viewId } = router.query;
 
-  const { params } = useSpreadsheetIssuesView();
+  const params = {};
 
   const { setToastAlert } = useToast();
 
@@ -137,14 +124,12 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           false
         );
 
-      issuesService
+      issueService
         .patchIssue(workspaceSlug as string, projectId, issue.id as string, formData, user)
         .then(() => {
           if (issue.parent) {
             mutate(SUB_ISSUES(issue.parent as string));
           } else {
-            mutate(fetchKey);
-
             if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
             if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
           }
@@ -153,7 +138,8 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           console.log(error);
         });
     },
-    [workspaceSlug, projectId, cycleId, moduleId, viewId, params, user]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [workspaceSlug, projectId, cycleId, moduleId, user]
   );
 
   const openPeekOverview = () => {
@@ -166,11 +152,8 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
   };
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`
-    ).then(() => {
+    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!",
@@ -190,7 +173,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
       },
       issue
     );
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -200,10 +183,10 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         issueId: issue.id,
       },
       "ISSUE_PROPERTY_UPDATE_STATE",
-      user
+      user as IUser
     );
     if (oldState?.group !== "completed" && newState?.group !== "completed") {
-      trackEventServices.trackIssueMarkedAsDoneEvent(
+      trackEventService.trackIssueMarkedAsDoneEvent(
         {
           workspaceSlug: issue.workspace_detail.slug,
           workspaceId: issue.workspace_detail.id,
@@ -212,14 +195,14 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
           projectName: issue.project_detail.name,
           issueId: issue.id,
         },
-        user
+        user as IUser
       );
     }
   };
 
   const handlePriorityChange = (data: TIssuePriorities) => {
     partialUpdateIssue({ priority: data }, issue);
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -229,7 +212,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         issueId: issue.id,
       },
       "ISSUE_PROPERTY_UPDATE_PRIORITY",
-      user
+      user as IUser
     );
   };
 
@@ -241,7 +224,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
     partialUpdateIssue({ assignees_list: data }, issue);
 
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -251,7 +234,7 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
         issueId: issue.id,
       },
       "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
-      user
+      user as IUser
     );
   };
 
@@ -426,14 +409,16 @@ export const SingleSpreadsheetIssue: React.FC<Props> = ({
 
         {properties.due_date && (
           <div className="flex items-center text-xs text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-            <ViewDueDateSelect
-              issue={issue}
-              partialUpdateIssue={partialUpdateIssue}
-              tooltipPosition={tooltipPosition}
-              noBorder
-              user={user}
-              isNotAllowed={isNotAllowed}
-            />
+            {user && (
+              <ViewDueDateSelect
+                issue={issue}
+                partialUpdateIssue={partialUpdateIssue}
+                tooltipPosition={tooltipPosition}
+                noBorder
+                user={user}
+                isNotAllowed={isNotAllowed}
+              />
+            )}
           </div>
         )}
         {properties.estimate && (
diff --git a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
index 3a5108410..f2900cf96 100644
--- a/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
+++ b/web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
@@ -1,13 +1,12 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-
-// next
+import React, { useEffect, useRef, useState } from "react";
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 
-import { KeyedMutator, mutate } from "swr";
-
+// hooks
+import useLocalStorage from "hooks/use-local-storage";
 // components
 import {
-  ListInlineCreateIssueForm,
+  // ListInlineCreateIssueForm,
   SpreadsheetAssigneeColumn,
   SpreadsheetCreatedOnColumn,
   SpreadsheetDueDateColumn,
@@ -19,59 +18,37 @@ import {
   SpreadsheetStateColumn,
   SpreadsheetUpdatedOnColumn,
 } from "components/core";
-import { CustomMenu, Icon, Spinner } from "components/ui";
+import { CustomMenu, Icon } from "components/ui";
 import { IssuePeekOverview } from "components/issues";
-// hooks
-import useIssuesProperties from "hooks/use-issue-properties";
-import useLocalStorage from "hooks/use-local-storage";
-import { useWorkspaceView } from "hooks/use-workspace-view";
+import { Spinner } from "@plane/ui";
 // types
-import {
-  ICurrentUserResponse,
-  IIssue,
-  ISubIssueResponse,
-  TIssueOrderByOptions,
-  UserAuth,
-} from "types";
-import {
-  CYCLE_DETAILS,
-  CYCLE_ISSUES_WITH_PARAMS,
-  MODULE_DETAILS,
-  MODULE_ISSUES_WITH_PARAMS,
-  PROJECT_ISSUES_LIST_WITH_PARAMS,
-  SUB_ISSUES,
-  VIEW_ISSUES,
-  WORKSPACE_VIEW_ISSUES,
-} from "constants/fetch-keys";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
-import projectIssuesServices from "services/issues.service";
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, TIssueOrderByOptions } from "types";
 // icon
 import { CheckIcon, ChevronDownIcon, PlusIcon } from "lucide-react";
 
 type Props = {
-  spreadsheetIssues: IIssue[];
-  mutateIssues: KeyedMutator<
-    | IIssue[]
-    | {
-        [key: string]: IIssue[];
-      }
-  >;
+  displayProperties: IIssueDisplayProperties;
+  displayFilters: IIssueDisplayFilterOptions;
+  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
+  issues: IIssue[] | undefined;
   handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  handleUpdateIssue: (issueId: string, data: Partial<IIssue>) => void;
   openIssuesListModal?: (() => void) | null;
   disableUserActions: boolean;
-  user: ICurrentUserResponse | undefined;
-  userAuth: UserAuth;
 };
 
-export const SpreadsheetView: React.FC<Props> = ({
-  spreadsheetIssues,
-  mutateIssues,
-  handleIssueAction,
-  openIssuesListModal,
-  disableUserActions,
-  user,
-  userAuth,
-}) => {
+export const SpreadsheetView: React.FC<Props> = observer((props) => {
+  const {
+    displayProperties,
+    displayFilters,
+    handleDisplayFilterUpdate,
+    issues,
+    handleIssueAction,
+    handleUpdateIssue,
+    openIssuesListModal,
+    disableUserActions,
+  } = props;
+
   const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
   const [currentProjectId, setCurrentProjectId] = useState<string | null>(null);
 
@@ -82,160 +59,22 @@ export const SpreadsheetView: React.FC<Props> = ({
   const containerRef = useRef<HTMLDivElement | null>(null);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId } = router.query;
+  const { workspaceSlug, cycleId, moduleId } = router.query;
 
   const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
 
-  const [properties] = useIssuesProperties(workspaceSlug as string, projectId as string);
-
   const { storedValue: selectedMenuItem, setValue: setSelectedMenuItem } = useLocalStorage(
     "spreadsheetViewSorting",
     ""
   );
-  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } =
-    useLocalStorage("spreadsheetViewActiveSortingProperty", "");
-
-  const workspaceIssuesPath = [
-    {
-      params: {
-        sub_issue: false,
-      },
-      path: "workspace-views/all-issues",
-    },
-    {
-      params: {
-        assignees: user?.id ?? undefined,
-        sub_issue: false,
-      },
-      path: "workspace-views/assigned",
-    },
-    {
-      params: {
-        created_by: user?.id ?? undefined,
-        sub_issue: false,
-      },
-      path: "workspace-views/created",
-    },
-    {
-      params: {
-        subscriber: user?.id ?? undefined,
-        sub_issue: false,
-      },
-      path: "workspace-views/subscribed",
-    },
-  ];
-
-  const currentWorkspaceIssuePath = workspaceIssuesPath.find((path) =>
-    router.pathname.includes(path.path)
+  const { storedValue: activeSortingProperty, setValue: setActiveSortingProperty } = useLocalStorage(
+    "spreadsheetViewActiveSortingProperty",
+    ""
   );
 
-  const {
-    params: workspaceViewParams,
-    filters: workspaceViewFilters,
-    handleFilters,
-  } = useWorkspaceView();
-
-  const workspaceViewProperties = workspaceViewFilters.display_properties;
-
-  const isWorkspaceView = globalViewId || currentWorkspaceIssuePath;
-
-  const currentViewProperties = isWorkspaceView ? workspaceViewProperties : properties;
-
-  const { params, displayFilters, setDisplayFilters } = useSpreadsheetIssuesView();
-
-  const partialUpdateIssue = useCallback(
-    (formData: Partial<IIssue>, issue: IIssue) => {
-      if (!workspaceSlug || !issue) 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)
-        : globalViewId
-        ? WORKSPACE_VIEW_ISSUES(globalViewId.toString(), workspaceViewParams)
-        : currentWorkspaceIssuePath
-        ? WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params)
-        : PROJECT_ISSUES_LIST_WITH_PARAMS(issue.project_detail.id, 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,
-                };
-              }
-              return p;
-            }),
-          false
-        );
-
-      projectIssuesServices
-        .patchIssue(
-          workspaceSlug as string,
-          issue.project_detail.id,
-          issue.id as string,
-          formData,
-          user
-        )
-        .then(() => {
-          if (issue.parent) {
-            mutate(SUB_ISSUES(issue.parent as string));
-          } else {
-            mutate(fetchKey);
-
-            if (cycleId) mutate(CYCLE_DETAILS(cycleId as string));
-            if (moduleId) mutate(MODULE_DETAILS(moduleId as string));
-          }
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
-    [
-      workspaceSlug,
-      cycleId,
-      moduleId,
-      viewId,
-      globalViewId,
-      workspaceViewParams,
-      currentWorkspaceIssuePath,
-      params,
-      user,
-    ]
-  );
-
-  const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
-
   const handleOrderBy = (order: TIssueOrderByOptions, itemKey: string) => {
-    if (globalViewId) handleFilters("display_filters", { order_by: order });
-    else setDisplayFilters({ order_by: order });
+    handleDisplayFilterUpdate({ order_by: order });
+
     setSelectedMenuItem(`${order}_${itemKey}`);
     setActiveSortingProperty(order === "-created_at" ? "" : itemKey);
   };
@@ -249,214 +88,176 @@ export const SpreadsheetView: React.FC<Props> = ({
   ) => (
     <div className="relative flex flex-col h-max w-full bg-custom-background-100">
       <div className="flex items-center min-w-[9rem] px-4 py-2.5 text-sm font-medium z-[1] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
-        {currentWorkspaceIssuePath ? (
-          <span>{header}</span>
-        ) : (
-          <CustomMenu
-            customButtonClassName="!w-full"
-            className="!w-full"
-            customButton={
-              <div
-                className={`relative group flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
-                  activeSortingProperty === propertyName ? "bg-custom-background-80" : ""
-                }`}
-              >
-                {activeSortingProperty === propertyName && (
-                  <div className="absolute top-1 right-1.5">
-                    <Icon
-                      iconName="filter_list"
-                      className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
-                    />
-                  </div>
-                )}
-
-                {header}
-                <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-              </div>
-            }
-            width="xl"
-          >
-            <CustomMenu.MenuItem
-              onClick={() => {
-                handleOrderBy(ascendingOrder, propertyName);
-              }}
-            >
-              <div
-                className={`group flex gap-1.5 px-1 items-center justify-between ${
-                  selectedMenuItem === `${ascendingOrder}_${propertyName}`
-                    ? "text-custom-text-100"
-                    : "text-custom-text-200 hover:text-custom-text-100"
-                }`}
-              >
-                <div className="flex gap-2 items-center">
-                  {propertyName === "assignee" || propertyName === "labels" ? (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 rotate-90 text-xs leading-3"
-                        />
-                        <Icon iconName="sort" className="absolute right-0 text-sm" />
-                      </span>
-                      <span>A</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>Z</span>
-                    </>
-                  ) : propertyName === "due_date" ||
-                    propertyName === "created_on" ||
-                    propertyName === "updated_on" ? (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 rotate-90 text-xs leading-3"
-                        />
-                        <Icon iconName="sort" className="absolute right-0 text-sm" />
-                      </span>
-                      <span>New</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>Old</span>
-                    </>
-                  ) : (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 rotate-90 text-xs leading-3"
-                        />
-                        <Icon iconName="sort" className="absolute right-0 text-sm" />
-                      </span>
-                      <span>First</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>Last</span>
-                    </>
-                  )}
-                </div>
-
-                <CheckIcon
-                  className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                    selectedMenuItem === `${ascendingOrder}_${propertyName}` ? "opacity-100" : ""
-                  }`}
-                />
-              </div>
-            </CustomMenu.MenuItem>
-            <CustomMenu.MenuItem
-              className={`mt-0.5 ${
-                selectedMenuItem === `${descendingOrder}_${propertyName}`
-                  ? "bg-custom-background-80"
-                  : ""
+        <CustomMenu
+          customButtonClassName="!w-full"
+          className="!w-full"
+          customButton={
+            <div
+              className={`relative group flex items-center justify-between gap-1.5 cursor-pointer text-sm text-custom-text-200 hover:text-custom-text-100 w-full py-3 px-2 ${
+                activeSortingProperty === propertyName ? "bg-custom-background-80" : ""
               }`}
-              key={propertyName}
-              onClick={() => {
-                handleOrderBy(descendingOrder, propertyName);
-              }}
             >
-              <div
-                className={`group flex gap-1.5 px-1 items-center justify-between ${
-                  selectedMenuItem === `${descendingOrder}_${propertyName}`
-                    ? "text-custom-text-100"
-                    : "text-custom-text-200 hover:text-custom-text-100"
-                }`}
-              >
-                <div className="flex gap-2 items-center">
-                  {propertyName === "assignee" || propertyName === "labels" ? (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 -rotate-90 text-xs leading-3"
-                        />
-                        <Icon
-                          iconName="sort"
-                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                        />
-                      </span>
-                      <span>Z</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>A</span>
-                    </>
-                  ) : propertyName === "due_date" ? (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 -rotate-90 text-xs leading-3"
-                        />
-                        <Icon
-                          iconName="sort"
-                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                        />
-                      </span>
-                      <span>Old</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>New</span>
-                    </>
-                  ) : (
-                    <>
-                      <span className="relative flex items-center h-6 w-6">
-                        <Icon
-                          iconName="east"
-                          className="absolute left-0 -rotate-90 text-xs leading-3"
-                        />
-                        <Icon
-                          iconName="sort"
-                          className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm"
-                        />
-                      </span>
-                      <span>Last</span>
-                      <Icon iconName="east" className="text-sm" />
-                      <span>First</span>
-                    </>
-                  )}
+              {activeSortingProperty === propertyName && (
+                <div className="absolute top-1 right-1.5">
+                  <Icon
+                    iconName="filter_list"
+                    className="flex items-center justify-center h-3.5 w-3.5 rounded-full bg-custom-primary text-xs text-white"
+                  />
                 </div>
-
-                <CheckIcon
-                  className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
-                    selectedMenuItem === `${descendingOrder}_${propertyName}` ? "opacity-100" : ""
-                  }`}
-                />
-              </div>
-            </CustomMenu.MenuItem>
-            {selectedMenuItem &&
-              selectedMenuItem !== "" &&
-              displayFilters?.order_by !== "-created_at" &&
-              selectedMenuItem.includes(propertyName) && (
-                <CustomMenu.MenuItem
-                  className={`mt-0.5${
-                    selectedMenuItem === `-created_at_${propertyName}`
-                      ? "bg-custom-background-80"
-                      : ""
-                  }`}
-                  key={propertyName}
-                  onClick={() => {
-                    handleOrderBy("-created_at", propertyName);
-                  }}
-                >
-                  <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
-                    <div className="flex gap-1.5 items-center">
-                      <span className="relative flex items-center justify-center h-6 w-6">
-                        <Icon iconName="ink_eraser" className="text-sm" />
-                      </span>
-
-                      <span>Clear sorting</span>
-                    </div>
-                  </div>
-                </CustomMenu.MenuItem>
               )}
-          </CustomMenu>
-        )}
+
+              {header}
+              <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
+            </div>
+          }
+          width="xl"
+        >
+          <CustomMenu.MenuItem
+            onClick={() => {
+              handleOrderBy(ascendingOrder, propertyName);
+            }}
+          >
+            <div
+              className={`group flex gap-1.5 px-1 items-center justify-between ${
+                selectedMenuItem === `${ascendingOrder}_${propertyName}`
+                  ? "text-custom-text-100"
+                  : "text-custom-text-200 hover:text-custom-text-100"
+              }`}
+            >
+              <div className="flex gap-2 items-center">
+                {propertyName === "assignee" || propertyName === "labels" ? (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
+                      <Icon iconName="sort" className="absolute right-0 text-sm" />
+                    </span>
+                    <span>A</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>Z</span>
+                  </>
+                ) : propertyName === "due_date" || propertyName === "created_on" || propertyName === "updated_on" ? (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
+                      <Icon iconName="sort" className="absolute right-0 text-sm" />
+                    </span>
+                    <span>New</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>Old</span>
+                  </>
+                ) : (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon iconName="east" className="absolute left-0 rotate-90 text-xs leading-3" />
+                      <Icon iconName="sort" className="absolute right-0 text-sm" />
+                    </span>
+                    <span>First</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>Last</span>
+                  </>
+                )}
+              </div>
+
+              <CheckIcon
+                className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
+                  selectedMenuItem === `${ascendingOrder}_${propertyName}` ? "opacity-100" : ""
+                }`}
+              />
+            </div>
+          </CustomMenu.MenuItem>
+          <CustomMenu.MenuItem
+            className={`mt-0.5 ${
+              selectedMenuItem === `${descendingOrder}_${propertyName}` ? "bg-custom-background-80" : ""
+            }`}
+            key={propertyName}
+            onClick={() => {
+              handleOrderBy(descendingOrder, propertyName);
+            }}
+          >
+            <div
+              className={`group flex gap-1.5 px-1 items-center justify-between ${
+                selectedMenuItem === `${descendingOrder}_${propertyName}`
+                  ? "text-custom-text-100"
+                  : "text-custom-text-200 hover:text-custom-text-100"
+              }`}
+            >
+              <div className="flex gap-2 items-center">
+                {propertyName === "assignee" || propertyName === "labels" ? (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
+                      <Icon iconName="sort" className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm" />
+                    </span>
+                    <span>Z</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>A</span>
+                  </>
+                ) : propertyName === "due_date" ? (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
+                      <Icon iconName="sort" className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm" />
+                    </span>
+                    <span>Old</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>New</span>
+                  </>
+                ) : (
+                  <>
+                    <span className="relative flex items-center h-6 w-6">
+                      <Icon iconName="east" className="absolute left-0 -rotate-90 text-xs leading-3" />
+                      <Icon iconName="sort" className="absolute rotate-180 transform scale-x-[-1] right-0 text-sm" />
+                    </span>
+                    <span>Last</span>
+                    <Icon iconName="east" className="text-sm" />
+                    <span>First</span>
+                  </>
+                )}
+              </div>
+
+              <CheckIcon
+                className={`h-3.5 w-3.5 opacity-0 group-hover:opacity-100 ${
+                  selectedMenuItem === `${descendingOrder}_${propertyName}` ? "opacity-100" : ""
+                }`}
+              />
+            </div>
+          </CustomMenu.MenuItem>
+          {selectedMenuItem &&
+            selectedMenuItem !== "" &&
+            displayFilters?.order_by !== "-created_at" &&
+            selectedMenuItem.includes(propertyName) && (
+              <CustomMenu.MenuItem
+                className={`mt-0.5${
+                  selectedMenuItem === `-created_at_${propertyName}` ? "bg-custom-background-80" : ""
+                }`}
+                key={propertyName}
+                onClick={() => {
+                  handleOrderBy("-created_at", propertyName);
+                }}
+              >
+                <div className={`group flex gap-1.5 px-1 items-center justify-between `}>
+                  <div className="flex gap-1.5 items-center">
+                    <span className="relative flex items-center justify-center h-6 w-6">
+                      <Icon iconName="ink_eraser" className="text-sm" />
+                    </span>
+
+                    <span>Clear sorting</span>
+                  </div>
+                </div>
+              </CustomMenu.MenuItem>
+            )}
+        </CustomMenu>
       </div>
       <div className="h-full min-w-[9rem] w-full">
-        {spreadsheetIssues.map((issue: IIssue, index) => (
+        {issues?.map((issue) => (
           <Component
-            key={`${issue.id}_${index}`}
+            key={issue.id}
             issue={issue}
             projectId={issue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
+            handleUpdateIssue={handleUpdateIssue}
             expandedIssues={expandedIssues}
-            properties={currentViewProperties}
-            user={user}
-            isNotAllowed={isNotAllowed}
+            properties={displayProperties}
+            isNotAllowed={disableUserActions}
           />
         ))}
       </div>
@@ -487,7 +288,6 @@ export const SpreadsheetView: React.FC<Props> = ({
   return (
     <>
       <IssuePeekOverview
-        handleMutation={() => mutateIssues()}
         projectId={currentProjectId ?? ""}
         workspaceSlug={workspaceSlug?.toString() ?? ""}
         readOnly={disableUserActions}
@@ -495,7 +295,7 @@ export const SpreadsheetView: React.FC<Props> = ({
       <div className="relative flex h-full w-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-200">
         <div className="h-full w-full flex flex-col">
           <div ref={containerRef} className="flex max-h-full h-full overflow-y-auto">
-            {spreadsheetIssues ? (
+            {issues ? (
               <>
                 <div className="sticky left-0 w-[28rem] z-[2]">
                   <div
@@ -505,17 +305,13 @@ export const SpreadsheetView: React.FC<Props> = ({
                     }}
                   >
                     <div className="flex items-center text-sm font-medium z-[2] h-11 w-full sticky top-0 bg-custom-background-90 border border-l-0 border-custom-border-100">
-                      {currentViewProperties.key && (
-                        <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">
-                          ID
-                        </span>
+                      {displayProperties.key && (
+                        <span className="flex items-center px-4 py-2.5 h-full w-24 flex-shrink-0">ID</span>
                       )}
-                      <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">
-                        Issue
-                      </span>
+                      <span className="flex items-center px-4 py-2.5 h-full w-full flex-grow">Issue</span>
                     </div>
 
-                    {spreadsheetIssues.map((issue: IIssue, index) => (
+                    {issues.map((issue: IIssue, index) => (
                       <SpreadsheetIssuesColumn
                         key={`${issue.id}_${index}`}
                         issue={issue}
@@ -523,32 +319,19 @@ export const SpreadsheetView: React.FC<Props> = ({
                         expandedIssues={expandedIssues}
                         setExpandedIssues={setExpandedIssues}
                         setCurrentProjectId={setCurrentProjectId}
-                        properties={currentViewProperties}
+                        properties={displayProperties}
                         handleIssueAction={handleIssueAction}
                         disableUserActions={disableUserActions}
-                        userAuth={userAuth}
                       />
                     ))}
                   </div>
                 </div>
-                {currentViewProperties.state &&
-                  renderColumn(
-                    "State",
-                    "state",
-                    SpreadsheetStateColumn,
-                    "state__name",
-                    "-state__name"
-                  )}
+                {displayProperties.state &&
+                  renderColumn("State", "state", SpreadsheetStateColumn, "state__name", "-state__name")}
 
-                {currentViewProperties.priority &&
-                  renderColumn(
-                    "Priority",
-                    "priority",
-                    SpreadsheetPriorityColumn,
-                    "priority",
-                    "-priority"
-                  )}
-                {currentViewProperties.assignee &&
+                {displayProperties.priority &&
+                  renderColumn("Priority", "priority", SpreadsheetPriorityColumn, "priority", "-priority")}
+                {displayProperties.assignee &&
                   renderColumn(
                     "Assignees",
                     "assignee",
@@ -556,54 +339,18 @@ export const SpreadsheetView: React.FC<Props> = ({
                     "assignees__first_name",
                     "-assignees__first_name"
                   )}
-                {currentViewProperties.labels &&
-                  renderColumn(
-                    "Label",
-                    "labels",
-                    SpreadsheetLabelColumn,
-                    "labels__name",
-                    "-labels__name"
-                  )}
-                {currentViewProperties.start_date &&
-                  renderColumn(
-                    "Start Date",
-                    "start_date",
-                    SpreadsheetStartDateColumn,
-                    "-start_date",
-                    "start_date"
-                  )}
-                {currentViewProperties.due_date &&
-                  renderColumn(
-                    "Due Date",
-                    "due_date",
-                    SpreadsheetDueDateColumn,
-                    "-target_date",
-                    "target_date"
-                  )}
-                {currentViewProperties.estimate &&
-                  renderColumn(
-                    "Estimate",
-                    "estimate",
-                    SpreadsheetEstimateColumn,
-                    "estimate_point",
-                    "-estimate_point"
-                  )}
-                {currentViewProperties.created_on &&
-                  renderColumn(
-                    "Created On",
-                    "created_on",
-                    SpreadsheetCreatedOnColumn,
-                    "-created_at",
-                    "created_at"
-                  )}
-                {currentViewProperties.updated_on &&
-                  renderColumn(
-                    "Updated On",
-                    "updated_on",
-                    SpreadsheetUpdatedOnColumn,
-                    "-updated_at",
-                    "updated_at"
-                  )}
+                {displayProperties.labels &&
+                  renderColumn("Label", "labels", SpreadsheetLabelColumn, "labels__name", "-labels__name")}
+                {displayProperties.start_date &&
+                  renderColumn("Start Date", "start_date", SpreadsheetStartDateColumn, "-start_date", "start_date")}
+                {displayProperties.due_date &&
+                  renderColumn("Due Date", "due_date", SpreadsheetDueDateColumn, "-target_date", "target_date")}
+                {displayProperties.estimate &&
+                  renderColumn("Estimate", "estimate", SpreadsheetEstimateColumn, "estimate_point", "-estimate_point")}
+                {displayProperties.created_on &&
+                  renderColumn("Created On", "created_on", SpreadsheetCreatedOnColumn, "-created_at", "created_at")}
+                {displayProperties.updated_on &&
+                  renderColumn("Updated On", "updated_on", SpreadsheetUpdatedOnColumn, "-updated_at", "updated_at")}
               </>
             ) : (
               <div className="flex flex-col justify-center items-center h-full w-full">
@@ -614,14 +361,14 @@ export const SpreadsheetView: React.FC<Props> = ({
 
           <div className="border-t border-custom-border-100">
             <div className="mb-3 z-50 sticky bottom-0 left-0">
-              <ListInlineCreateIssueForm
+              {/* <ListInlineCreateIssueForm
                 isOpen={isInlineCreateIssueFormOpen}
                 handleClose={() => setIsInlineCreateIssueFormOpen(false)}
                 prePopulatedData={{
                   ...(cycleId && { cycle: cycleId.toString() }),
                   ...(moduleId && { module: moduleId.toString() }),
                 }}
-              />
+              /> */}
             </div>
 
             {type === "issue"
@@ -640,10 +387,13 @@ export const SpreadsheetView: React.FC<Props> = ({
                   <CustomMenu
                     className="sticky left-0 z-10"
                     customButton={
-                      <div className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full">
+                      <button
+                        className="flex gap-1.5 items-center text-custom-primary-100 pl-4 py-2.5 text-sm sticky left-0 z-[1] border-custom-border-200 w-full"
+                        type="button"
+                      >
                         <PlusIcon className="h-4 w-4" />
                         New Issue
-                      </div>
+                      </button>
                     }
                     optionsClassName="left-5 !w-36"
                     noBorder
@@ -652,9 +402,7 @@ export const SpreadsheetView: React.FC<Props> = ({
                       Create new
                     </CustomMenu.MenuItem>
                     {openIssuesListModal && (
-                      <CustomMenu.MenuItem onClick={openIssuesListModal}>
-                        Add an existing issue
-                      </CustomMenu.MenuItem>
+                      <CustomMenu.MenuItem onClick={openIssuesListModal}>Add an existing issue</CustomMenu.MenuItem>
                     )}
                   </CustomMenu>
                 )}
@@ -663,4 +411,4 @@ export const SpreadsheetView: React.FC<Props> = ({
       </div>
     </>
   );
-};
+});
diff --git a/web/components/core/views/spreadsheet-view/start-date-column/spreadsheet-start-date-column.tsx b/web/components/core/views/spreadsheet-view/start-date-column/spreadsheet-start-date-column.tsx
index 064506ca2..b239fd880 100644
--- a/web/components/core/views/spreadsheet-view/start-date-column/spreadsheet-start-date-column.tsx
+++ b/web/components/core/views/spreadsheet-view/start-date-column/spreadsheet-start-date-column.tsx
@@ -5,7 +5,7 @@ import { StartDateColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
@@ -13,7 +13,7 @@ type Props = {
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   expandedIssues: string[];
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
diff --git a/web/components/core/views/spreadsheet-view/start-date-column/start-date-column.tsx b/web/components/core/views/spreadsheet-view/start-date-column/start-date-column.tsx
index 6774ce1b9..87b3dc838 100644
--- a/web/components/core/views/spreadsheet-view/start-date-column/start-date-column.tsx
+++ b/web/components/core/views/spreadsheet-view/start-date-column/start-date-column.tsx
@@ -1,38 +1,33 @@
 import React from "react";
-
 // components
 import { ViewStartDateSelect } from "components/issues";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
   projectId: string;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
-export const StartDateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => (
-  <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-      {properties.due_date && (
-        <ViewStartDateSelect
-          issue={issue}
-          partialUpdateIssue={partialUpdateIssue}
-          noBorder
-          user={user}
-          isNotAllowed={isNotAllowed}
-        />
-      )}
-    </span>
-  </div>
-);
+export const StartDateColumn: React.FC<Props> = (props) => {
+  const { issue, partialUpdateIssue, properties, user, isNotAllowed } = props;
+  return (
+    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
+      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+        {properties.due_date && (
+          <ViewStartDateSelect
+            issue={issue}
+            partialUpdateIssue={partialUpdateIssue}
+            noBorder
+            user={user}
+            isNotAllowed={isNotAllowed}
+          />
+        )}
+      </span>
+    </div>
+  );
+};
diff --git a/web/components/core/views/spreadsheet-view/state-column/spreadsheet-state-column.tsx b/web/components/core/views/spreadsheet-view/state-column/spreadsheet-state-column.tsx
index 606f3e28a..d0e3792ee 100644
--- a/web/components/core/views/spreadsheet-view/state-column/spreadsheet-state-column.tsx
+++ b/web/components/core/views/spreadsheet-view/state-column/spreadsheet-state-column.tsx
@@ -5,22 +5,22 @@ import { StateColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
   projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  handleUpdateIssue: (issueId: string, data: Partial<IIssue>) => void;
   expandedIssues: string[];
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
 export const SpreadsheetStateColumn: React.FC<Props> = ({
   issue,
   projectId,
-  partialUpdateIssue,
+  handleUpdateIssue,
   expandedIssues,
   properties,
   user,
@@ -32,25 +32,27 @@ export const SpreadsheetStateColumn: React.FC<Props> = ({
 
   return (
     <div>
-      <StateColumn
-        issue={issue}
-        projectId={projectId}
-        properties={properties}
-        partialUpdateIssue={partialUpdateIssue}
-        user={user}
-        isNotAllowed={isNotAllowed}
-      />
+      {user && (
+        <StateColumn
+          issue={issue}
+          projectId={projectId}
+          properties={properties}
+          onChange={(data) => handleUpdateIssue(issue.id, data)}
+          user={user}
+          isNotAllowed={isNotAllowed}
+        />
+      )}
 
       {isExpanded &&
         !isLoading &&
         subIssues &&
         subIssues.length > 0 &&
-        subIssues.map((subIssue: IIssue) => (
+        subIssues.map((subIssue) => (
           <SpreadsheetStateColumn
             key={subIssue.id}
             issue={subIssue}
             projectId={subIssue.project_detail.id}
-            partialUpdateIssue={partialUpdateIssue}
+            handleUpdateIssue={handleUpdateIssue}
             expandedIssues={expandedIssues}
             properties={properties}
             user={user}
diff --git a/web/components/core/views/spreadsheet-view/state-column/state-column.tsx b/web/components/core/views/spreadsheet-view/state-column/state-column.tsx
index 04c833b1d..68f381edf 100644
--- a/web/components/core/views/spreadsheet-view/state-column/state-column.tsx
+++ b/web/components/core/views/spreadsheet-view/state-column/state-column.tsx
@@ -1,31 +1,24 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 // components
 import { StateSelect } from "components/states";
 // services
-import trackEventServices from "services/track-event.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import { ICurrentUserResponse, IIssue, IState, Properties } from "types";
+import { IUser, IIssue, IState, Properties } from "types";
 
 type Props = {
   issue: IIssue;
   projectId: string;
-  partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
+  onChange: (formData: Partial<IIssue>) => void;
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser;
   isNotAllowed: boolean;
 };
 
-export const StateColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => {
+const trackEventService = new TrackEventService();
+
+export const StateColumn: React.FC<Props> = ({ issue, projectId, onChange, properties, user, isNotAllowed }) => {
   const router = useRouter();
 
   const { workspaceSlug } = router.query;
@@ -34,14 +27,11 @@ export const StateColumn: React.FC<Props> = ({
     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(
+    onChange({
+      state: data,
+      state_detail: newState,
+    });
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -54,7 +44,7 @@ export const StateColumn: React.FC<Props> = ({
       user
     );
     if (oldState?.group !== "completed" && newState?.group !== "completed") {
-      trackEventServices.trackIssueMarkedAsDoneEvent(
+      trackEventService.trackIssueMarkedAsDoneEvent(
         {
           workspaceSlug: issue.workspace_detail.slug,
           workspaceId: issue.workspace_detail.id,
diff --git a/web/components/core/views/spreadsheet-view/updated-on-column/spreadsheet-updated-on-column.tsx b/web/components/core/views/spreadsheet-view/updated-on-column/spreadsheet-updated-on-column.tsx
index bb29e460d..1df6d7bbe 100644
--- a/web/components/core/views/spreadsheet-view/updated-on-column/spreadsheet-updated-on-column.tsx
+++ b/web/components/core/views/spreadsheet-view/updated-on-column/spreadsheet-updated-on-column.tsx
@@ -5,7 +5,7 @@ import { UpdatedOnColumn } from "components/core";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 
 type Props = {
   issue: IIssue;
@@ -13,7 +13,7 @@ type Props = {
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   expandedIssues: string[];
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
diff --git a/web/components/core/views/spreadsheet-view/updated-on-column/updated-on-column.tsx b/web/components/core/views/spreadsheet-view/updated-on-column/updated-on-column.tsx
index 087d589fc..a108d17c3 100644
--- a/web/components/core/views/spreadsheet-view/updated-on-column/updated-on-column.tsx
+++ b/web/components/core/views/spreadsheet-view/updated-on-column/updated-on-column.tsx
@@ -1,7 +1,6 @@
-import React from "react";
-
+import { FC } from "react";
 // types
-import { ICurrentUserResponse, IIssue, Properties } from "types";
+import { IUser, IIssue, Properties } from "types";
 // helper
 import { renderLongDetailDateFormat } from "helpers/date-time.helper";
 
@@ -10,25 +9,22 @@ type Props = {
   projectId: string;
   partialUpdateIssue: (formData: Partial<IIssue>, issue: IIssue) => void;
   properties: Properties;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
-export const UpdatedOnColumn: React.FC<Props> = ({
-  issue,
-  projectId,
-  partialUpdateIssue,
-  properties,
-  user,
-  isNotAllowed,
-}) => (
-  <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
-    <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
-      {properties.updated_on && (
-        <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
-          {renderLongDetailDateFormat(issue.updated_at)}
-        </div>
-      )}
-    </span>
-  </div>
-);
+export const UpdatedOnColumn: FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { issue, projectId, partialUpdateIssue, properties, user, isNotAllowed } = props;
+  return (
+    <div className="flex items-center text-sm h-11 w-full bg-custom-background-100">
+      <span className="flex items-center px-4 py-2.5 h-full w-full flex-shrink-0 border-r border-b border-custom-border-100">
+        {properties.updated_on && (
+          <div className="flex items-center text-xs cursor-default text-custom-text-200 text-center p-2 group-hover:bg-custom-background-80 border-custom-border-200">
+            {renderLongDetailDateFormat(issue.updated_at)}
+          </div>
+        )}
+      </span>
+    </div>
+  );
+};
diff --git a/web/components/cycles/active-cycle-details.tsx b/web/components/cycles/active-cycle-details.tsx
index 7816f0edb..09ee9853d 100644
--- a/web/components/cycles/active-cycle-details.tsx
+++ b/web/components/cycles/active-cycle-details.tsx
@@ -6,13 +6,13 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import cyclesService from "services/cycles.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { LinearProgressIndicator, Loader, Tooltip } from "components/ui";
 import { AssigneesList } from "components/ui/avatar";
 import { SingleProgressStats } from "components/core";
+import { Loader, Tooltip, LinearProgressIndicator } from "@plane/ui";
 // components
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { ActiveCycleProgressStats } from "components/cycles";
@@ -34,11 +34,7 @@ import { StarIcon } from "@heroicons/react/24/outline";
 // components
 import { ViewIssueLabel } from "components/issues";
 // helpers
-import {
-  getDateRangeStatus,
-  renderShortDateWithYearFormat,
-  findHowManyDaysLeft,
-} from "helpers/date-time.helper";
+import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
 import { ICycle, IIssue } from "types";
@@ -73,6 +69,9 @@ const stateGroups = [
   },
 ];
 
+// services
+const cycleService = new CycleService();
+
 export const ActiveCycleDetails: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -82,24 +81,18 @@ 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;
 
   const { data: issues } = useSWR(
-    workspaceSlug && projectId && cycle?.id
-      ? CYCLE_ISSUES_WITH_PARAMS(cycle?.id, { priority: "urgent,high" })
-      : null,
+    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,
-            { priority: "urgent,high" }
-          )
+          cycleService.getCycleIssuesWithParams(workspaceSlug as string, projectId as string, cycle.id, {
+            priority: "urgent,high",
+          })
       : null
   ) as { data: IIssue[] | undefined };
 
@@ -115,20 +108,8 @@ export const ActiveCycleDetails: React.FC = () => {
       <div className="h-full grid place-items-center text-center">
         <div className="space-y-2">
           <div className="mx-auto flex justify-center">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="66"
-              height="66"
-              viewBox="0 0 66 66"
-              fill="none"
-            >
-              <circle
-                cx="34.375"
-                cy="34.375"
-                r="22"
-                stroke="rgb(var(--color-text-400))"
-                strokeLinecap="round"
-              />
+            <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
+              <circle cx="34.375" cy="34.375" r="22" stroke="rgb(var(--color-text-400))" strokeLinecap="round" />
               <path
                 d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
                 fill="rgb(var(--color-text-400))"
@@ -188,7 +169,7 @@ export const ActiveCycleDetails: React.FC = () => {
       false
     );
 
-    cyclesService
+    cycleService
       .addCycleToFavorites(workspaceSlug as string, projectId as string, {
         cycle: cycle.id,
       })
@@ -224,24 +205,19 @@ export const ActiveCycleDetails: React.FC = () => {
       false
     );
 
-    cyclesService
-      .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't remove the cycle from favorites. Please try again.",
-        });
+    cycleService.removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the cycle from favorites. Please try again.",
       });
+    });
   };
 
   const progressIndicatorData = stateGroups.map((group, index) => ({
     id: index,
     name: group.title,
-    value:
-      cycle.total_issues > 0
-        ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
-        : 0,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
     color: group.color,
   }));
 
@@ -270,9 +246,7 @@ export const ActiveCycleDetails: React.FC = () => {
                     />
                   </span>
                   <Tooltip tooltipContent={cycle.name} position="top-left">
-                    <h3 className="break-words text-lg font-semibold">
-                      {truncateText(cycle.name, 70)}
-                    </h3>
+                    <h3 className="break-words text-lg font-semibold">{truncateText(cycle.name, 70)}</h3>
                   </Tooltip>
                 </span>
                 <span className="flex items-center gap-1 capitalize">
@@ -304,9 +278,7 @@ export const ActiveCycleDetails: React.FC = () => {
                       <span className="flex gap-1 whitespace-nowrap">
                         {cycle.total_issues - cycle.completed_issues > 0 && (
                           <Tooltip
-                            tooltipContent={`${
-                              cycle.total_issues - cycle.completed_issues
-                            } more pending ${
+                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
                               cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
                             }`}
                           >
@@ -443,9 +415,7 @@ export const ActiveCycleDetails: React.FC = () => {
                   issues.map((issue) => (
                     <div
                       key={issue.id}
-                      onClick={() =>
-                        router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)
-                      }
+                      onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/issues/${issue.id}`)}
                       className="flex flex-wrap cursor-pointer rounded-md items-center justify-between gap-2 border border-custom-border-200 bg-custom-background-90 px-3 py-1.5"
                     >
                       <div className="flex flex-col gap-1">
@@ -459,14 +429,8 @@ export const ActiveCycleDetails: React.FC = () => {
                             </span>
                           </Tooltip>
                         </div>
-                        <Tooltip
-                          position="top-left"
-                          tooltipHeading="Title"
-                          tooltipContent={issue.name}
-                        >
-                          <span className="text-[0.825rem] text-custom-text-100">
-                            {truncateText(issue.name, 30)}
-                          </span>
+                        <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
+                          <span className="text-[0.825rem] text-custom-text-100">{truncateText(issue.name, 30)}</span>
                         </Tooltip>
                       </div>
                       <div className="flex items-center gap-1.5">
@@ -481,15 +445,9 @@ export const ActiveCycleDetails: React.FC = () => {
                         </div>
                         <ViewIssueLabel labelDetails={issue.label_details} maxRender={2} />
                         <div className={`flex items-center gap-2 text-custom-text-200`}>
-                          {issue.assignees &&
-                          issue.assignees.length > 0 &&
-                          Array.isArray(issue.assignees) ? (
+                          {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
                             <div className="-my-0.5 flex items-center justify-center gap-2">
-                              <AssigneesList
-                                users={issue.assignee_details}
-                                length={3}
-                                showLength={false}
-                              />
+                              <AssigneesList users={issue.assignee_details} length={3} showLength={false} />
                             </div>
                           ) : (
                             ""
@@ -522,17 +480,14 @@ export const ActiveCycleDetails: React.FC = () => {
                     width:
                       issues &&
                       `${
-                        (issues.filter((issue) => issue?.state_detail?.group === "completed")
-                          ?.length /
-                          issues.length) *
+                        (issues.filter((issue) => issue?.state_detail?.group === "completed")?.length / issues.length) *
                           100 ?? 0
                       }%`,
                   }}
                 />
               </div>
               <div className="w-16 text-end text-xs text-custom-text-200">
-                {issues?.filter((issue) => issue?.state_detail?.group === "completed")?.length} of{" "}
-                {issues?.length}
+                {issues?.filter((issue) => issue?.state_detail?.group === "completed")?.length} of {issues?.length}
               </div>
             </div>
           )}
@@ -553,10 +508,7 @@ export const ActiveCycleDetails: React.FC = () => {
               <span>
                 <LayerDiagonalIcon className="h-5 w-5 flex-shrink-0 text-custom-text-200" />
               </span>
-              <span>
-                Pending Issues -{" "}
-                {cycle.total_issues - (cycle.completed_issues + cycle.cancelled_issues)}
-              </span>
+              <span>Pending Issues - {cycle.total_issues - (cycle.completed_issues + cycle.cancelled_issues)}</span>
             </div>
           </div>
           <div className="relative h-64">
diff --git a/web/components/cycles/cycles-board-card.tsx b/web/components/cycles/cycles-board-card.tsx
new file mode 100644
index 000000000..9a5650047
--- /dev/null
+++ b/web/components/cycles/cycles-board-card.tsx
@@ -0,0 +1,366 @@
+import React, { FC } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Disclosure, Transition } from "@headlessui/react";
+// hooks
+import useToast from "hooks/use-toast";
+// components
+import { SingleProgressStats } from "components/core";
+// ui
+import { CustomMenu } from "components/ui";
+import { AssigneesList } from "components/ui/avatar";
+import { Tooltip, LinearProgressIndicator } from "@plane/ui";
+// icons
+import { CalendarDaysIcon } from "@heroicons/react/20/solid";
+import {
+  TargetIcon,
+  ContrastIcon,
+  PersonRunningIcon,
+  ArrowRightIcon,
+  TriangleExclamationIcon,
+  AlarmClockIcon,
+} from "components/icons";
+import { ChevronDownIcon, LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+// helpers
+import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// types
+import { ICycle } from "types";
+
+const stateGroups = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];
+
+export interface ICyclesBoardCard {
+  cycle: ICycle;
+  filter: string;
+}
+
+export const CyclesBoardCard: FC<ICyclesBoardCard> = (props) => {
+  const { cycle } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // toast
+  const { setToastAlert } = useToast();
+
+  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+  const isCompleted = cycleStatus === "completed";
+  const endDate = new Date(cycle.end_date ?? "");
+  const startDate = new Date(cycle.start_date ?? "");
+
+  const handleCopyText = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Cycle link copied to clipboard.",
+      });
+    });
+  };
+
+  const progressIndicatorData = stateGroups.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
+    color: group.color,
+  }));
+
+  const groupedIssues: any = {
+    backlog: cycle.backlog_issues,
+    unstarted: cycle.unstarted_issues,
+    started: cycle.started_issues,
+    completed: cycle.completed_issues,
+    cancelled: cycle.cancelled_issues,
+  };
+
+  const handleRemoveFromFavorites = () => {};
+  const handleAddToFavorites = () => {};
+
+  const handleEditCycle = () => {};
+  const handleDeleteCycle = () => {};
+
+  return (
+    <div>
+      <div className="flex flex-col rounded-[10px] bg-custom-background-100 border border-custom-border-200 text-xs shadow">
+        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+          <a className="w-full">
+            <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
+              <div className="flex items-center justify-between gap-1">
+                <span className="flex items-center gap-1">
+                  <span className="h-5 w-5">
+                    <ContrastIcon
+                      className="h-5 w-5"
+                      color={`${
+                        cycleStatus === "current"
+                          ? "#09A953"
+                          : cycleStatus === "upcoming"
+                          ? "#F7AE59"
+                          : cycleStatus === "completed"
+                          ? "#3F76FF"
+                          : cycleStatus === "draft"
+                          ? "rgb(var(--color-text-200))"
+                          : ""
+                      }`}
+                    />
+                  </span>
+                  <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
+                    <h3 className="break-words text-lg font-semibold">{truncateText(cycle.name, 15)}</h3>
+                  </Tooltip>
+                </span>
+                <span className="flex items-center gap-1 capitalize">
+                  <span
+                    className={`rounded-full px-1.5 py-0.5
+                  ${
+                    cycleStatus === "current"
+                      ? "bg-green-600/5 text-green-600"
+                      : cycleStatus === "upcoming"
+                      ? "bg-orange-300/5 text-orange-300"
+                      : cycleStatus === "completed"
+                      ? "bg-blue-500/5 text-blue-500"
+                      : cycleStatus === "draft"
+                      ? "bg-neutral-400/5 text-neutral-400"
+                      : ""
+                  }`}
+                  >
+                    {cycleStatus === "current" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        <PersonRunningIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "upcoming" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        <AlarmClockIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} Days Left
+                      </span>
+                    ) : cycleStatus === "completed" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        {cycle.total_issues - cycle.completed_issues > 0 && (
+                          <Tooltip
+                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
+                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
+                            }`}
+                          >
+                            <span>
+                              <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
+                            </span>
+                          </Tooltip>
+                        )}{" "}
+                        Completed
+                      </span>
+                    ) : (
+                      cycleStatus
+                    )}
+                  </span>
+                  {cycle.is_favorite ? (
+                    <button onClick={handleRemoveFromFavorites}>
+                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button onClick={handleAddToFavorites}>
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                    </button>
+                  )}
+                </span>
+              </div>
+              <div className="flex h-4 items-center justify-start gap-5 text-custom-text-200">
+                {cycleStatus !== "draft" && (
+                  <>
+                    <div className="flex items-start gap-1">
+                      <CalendarDaysIcon className="h-4 w-4" />
+                      <span>{renderShortDateWithYearFormat(startDate)}</span>
+                    </div>
+                    <ArrowRightIcon className="h-4 w-4" />
+                    <div className="flex items-start gap-1">
+                      <TargetIcon className="h-4 w-4" />
+                      <span>{renderShortDateWithYearFormat(endDate)}</span>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              <div className="flex justify-between items-end">
+                <div className="flex flex-col gap-2 text-xs text-custom-text-200">
+                  <div className="flex items-center gap-2">
+                    <div className="w-16">Creator:</div>
+                    <div className="flex items-center gap-2.5 text-custom-text-200">
+                      {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                        <img
+                          src={cycle.owned_by.avatar}
+                          height={16}
+                          width={16}
+                          className="rounded-full"
+                          alt={cycle.owned_by.display_name}
+                        />
+                      ) : (
+                        <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
+                          {cycle.owned_by.display_name.charAt(0)}
+                        </span>
+                      )}
+                      <span className="text-custom-text-200">{cycle.owned_by.display_name}</span>
+                    </div>
+                  </div>
+                  <div className="flex h-5 items-center gap-2">
+                    <div className="w-16">Members:</div>
+                    {cycle.assignees.length > 0 ? (
+                      <div className="flex items-center gap-1 text-custom-text-200">
+                        <AssigneesList users={cycle.assignees} length={4} />
+                      </div>
+                    ) : (
+                      "No members"
+                    )}
+                  </div>
+                </div>
+
+                <div className="flex items-center">
+                  {!isCompleted && (
+                    <button
+                      onClick={handleEditCycle}
+                      className="cursor-pointer rounded p-1 text-custom-text-200 duration-300 hover:bg-custom-background-80"
+                    >
+                      <PencilIcon className="h-4 w-4" />
+                    </button>
+                  )}
+
+                  <CustomMenu width="auto" verticalEllipsis>
+                    {!isCompleted && (
+                      <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                        <span className="flex items-center justify-start gap-2">
+                          <TrashIcon className="h-4 w-4" />
+                          <span>Delete cycle</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    )}
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        handleCopyText();
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <LinkIcon className="h-4 w-4" />
+                        <span>Copy cycle link</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            </div>
+          </a>
+        </Link>
+
+        <div className="flex h-full flex-col rounded-b-[10px]">
+          <Disclosure>
+            {({ open }) => (
+              <div
+                className={`flex h-full w-full flex-col rounded-b-[10px] border-t border-custom-border-200 bg-custom-background-80 text-custom-text-200 ${
+                  open ? "" : "flex-row"
+                }`}
+              >
+                <div className="flex w-full items-center gap-2 px-4 py-1">
+                  <span>Progress</span>
+                  <Tooltip
+                    tooltipContent={
+                      <div className="flex w-56 flex-col">
+                        {Object.keys(groupedIssues).map((group, index) => (
+                          <SingleProgressStats
+                            key={index}
+                            title={
+                              <div className="flex items-center gap-2">
+                                <span
+                                  className="block h-3 w-3 rounded-full "
+                                  style={{
+                                    backgroundColor: stateGroups[index].color,
+                                  }}
+                                />
+                                <span className="text-xs capitalize">{group}</span>
+                              </div>
+                            }
+                            completed={groupedIssues[group]}
+                            total={cycle.total_issues}
+                          />
+                        ))}
+                      </div>
+                    }
+                    position="bottom"
+                  >
+                    <div className="flex w-full items-center">
+                      <LinearProgressIndicator data={progressIndicatorData} noTooltip={true} />
+                    </div>
+                  </Tooltip>
+                  <Disclosure.Button>
+                    <span className="p-1">
+                      <ChevronDownIcon className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
+                    </span>
+                  </Disclosure.Button>
+                </div>
+                <Transition show={open}>
+                  <Disclosure.Panel>
+                    <div className="overflow-hidden rounded-b-md bg-custom-background-80 py-3 shadow">
+                      <div className="col-span-2 space-y-3 px-4">
+                        <div className="space-y-3 text-xs">
+                          {stateGroups.map((group) => (
+                            <div key={group.key} className="flex items-center justify-between gap-2">
+                              <div className="flex  items-center gap-2">
+                                <span
+                                  className="block h-2 w-2 rounded-full"
+                                  style={{
+                                    backgroundColor: group.color,
+                                  }}
+                                />
+                                <h6 className="text-xs">{group.title}</h6>
+                              </div>
+                              <div>
+                                <span>
+                                  {cycle[group.key as keyof ICycle] as number}{" "}
+                                  <span className="text-custom-text-200">
+                                    -{" "}
+                                    {cycle.total_issues > 0
+                                      ? `${Math.round(
+                                          ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
+                                        )}%`
+                                      : "0%"}
+                                  </span>
+                                </span>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </Disclosure.Panel>
+                </Transition>
+              </div>
+            )}
+          </Disclosure>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/cycles/cycles-board.tsx b/web/components/cycles/cycles-board.tsx
new file mode 100644
index 000000000..7bbe6dae2
--- /dev/null
+++ b/web/components/cycles/cycles-board.tsx
@@ -0,0 +1,53 @@
+import { FC } from "react";
+// types
+import { ICycle } from "types";
+// components
+import { CyclesBoardCard } from "components/cycles";
+
+export interface ICyclesBoard {
+  cycles: ICycle[];
+  filter: string;
+}
+
+export const CyclesBoard: FC<ICyclesBoard> = (props) => {
+  const { cycles, filter } = props;
+
+  return (
+    <div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
+      {cycles.length > 0 ? (
+        <>
+          {cycles.map((cycle) => (
+            <CyclesBoardCard key={cycle.id} cycle={cycle} filter={filter} />
+          ))}
+        </>
+      ) : (
+        <div className="h-full grid place-items-center text-center">
+          <div className="space-y-2">
+            <div className="mx-auto flex justify-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
+                <circle cx="34.375" cy="34.375" r="22" stroke="rgb(var(--color-text-400))" strokeLinecap="round" />
+                <path
+                  d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
+                  fill="rgb(var(--color-text-400))"
+                />
+              </svg>
+            </div>
+            <h4 className="text-sm text-custom-text-200">{filter === "all" ? "No cycles" : `No ${filter} cycles`}</h4>
+            <button
+              type="button"
+              className="text-custom-primary-100 text-sm outline-none"
+              onClick={() => {
+                const e = new KeyboardEvent("keydown", {
+                  key: "q",
+                });
+                document.dispatchEvent(e);
+              }}
+            >
+              Create a new cycle
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/cycles/cycles-gantt.tsx b/web/components/cycles/cycles-gantt.tsx
new file mode 100644
index 000000000..7b370ba30
--- /dev/null
+++ b/web/components/cycles/cycles-gantt.tsx
@@ -0,0 +1 @@
+export const CycleGantt = () => <></>;
diff --git a/web/components/cycles/cycles-list-item.tsx b/web/components/cycles/cycles-list-item.tsx
new file mode 100644
index 000000000..70d32cd1d
--- /dev/null
+++ b/web/components/cycles/cycles-list-item.tsx
@@ -0,0 +1,328 @@
+import { FC, MouseEvent } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { RadialProgressBar, Tooltip, LinearProgressIndicator } from "@plane/ui";
+import { CustomMenu } from "components/ui";
+// icons
+import { CalendarDaysIcon } from "@heroicons/react/20/solid";
+import {
+  TargetIcon,
+  ContrastIcon,
+  PersonRunningIcon,
+  ArrowRightIcon,
+  TriangleExclamationIcon,
+  AlarmClockIcon,
+} from "components/icons";
+import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+// helpers
+import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+// types
+import { ICycle } from "types";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+type TCyclesListItem = {
+  cycle: ICycle;
+  handleEditCycle?: () => void;
+  handleDeleteCycle?: () => void;
+  handleAddToFavorites?: () => void;
+  handleRemoveFromFavorites?: () => void;
+};
+
+const stateGroups = [
+  {
+    key: "backlog_issues",
+    title: "Backlog",
+    color: "#dee2e6",
+  },
+  {
+    key: "unstarted_issues",
+    title: "Unstarted",
+    color: "#26b5ce",
+  },
+  {
+    key: "started_issues",
+    title: "Started",
+    color: "#f7ae59",
+  },
+  {
+    key: "cancelled_issues",
+    title: "Cancelled",
+    color: "#d687ff",
+  },
+  {
+    key: "completed_issues",
+    title: "Completed",
+    color: "#09a953",
+  },
+];
+
+export const CyclesListItem: FC<TCyclesListItem> = (props) => {
+  const { cycle } = props;
+  // store
+  const { cycle: cycleStore } = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // toast
+  const { setToastAlert } = useToast();
+
+  const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+  const isCompleted = cycleStatus === "completed";
+  const endDate = new Date(cycle.end_date ?? "");
+  const startDate = new Date(cycle.start_date ?? "");
+
+  const handleCopyText = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Cycle link copied to clipboard.",
+      });
+    });
+  };
+
+  const progressIndicatorData = stateGroups.map((group, index) => ({
+    id: index,
+    name: group.title,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
+    color: group.color,
+  }));
+
+  const handleAddToFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    cycleStore.addCycleToFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    if (!workspaceSlug || !projectId) return;
+
+    cycleStore.removeCycleFromFavorites(workspaceSlug?.toString(), projectId.toString(), cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't add the cycle to favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleEditCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+  };
+
+  const handleDeleteCycle = (e: MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+  };
+
+  return (
+    <div>
+      <div className="flex flex-col text-xs hover:bg-custom-background-80">
+        <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}>
+          <a className="w-full">
+            <div className="flex h-full flex-col gap-4 rounded-b-[10px] p-4">
+              <div className="flex items-center justify-between gap-1">
+                <div className="flex items-start gap-2">
+                  <ContrastIcon
+                    className="mt-1 h-5 w-5"
+                    color={`${
+                      cycleStatus === "current"
+                        ? "#09A953"
+                        : cycleStatus === "upcoming"
+                        ? "#F7AE59"
+                        : cycleStatus === "completed"
+                        ? "#3F76FF"
+                        : cycleStatus === "draft"
+                        ? "rgb(var(--color-text-200))"
+                        : ""
+                    }`}
+                  />
+                  <div className="max-w-2xl">
+                    <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
+                      <h3 className="break-words w-full text-base font-semibold">{truncateText(cycle.name, 60)}</h3>
+                    </Tooltip>
+                    <p className="mt-2 text-custom-text-200 break-words w-full">{cycle.description}</p>
+                  </div>
+                </div>
+                <div className="flex-shrink-0 flex items-center gap-4">
+                  <span
+                    className={`rounded-full px-1.5 py-0.5
+                    ${
+                      cycleStatus === "current"
+                        ? "bg-green-600/5 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "bg-orange-300/5 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "bg-blue-500/5 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "bg-neutral-400/5 text-neutral-400"
+                        : ""
+                    }`}
+                  >
+                    {cycleStatus === "current" ? (
+                      <span className="flex gap-1 whitespace-nowrap">
+                        <PersonRunningIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.end_date ?? new Date())} days left
+                      </span>
+                    ) : cycleStatus === "upcoming" ? (
+                      <span className="flex gap-1">
+                        <AlarmClockIcon className="h-4 w-4" />
+                        {findHowManyDaysLeft(cycle.start_date ?? new Date())} days left
+                      </span>
+                    ) : cycleStatus === "completed" ? (
+                      <span className="flex items-center gap-1">
+                        {cycle.total_issues - cycle.completed_issues > 0 && (
+                          <Tooltip
+                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
+                              cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
+                            }`}
+                          >
+                            <span>
+                              <TriangleExclamationIcon className="h-3.5 w-3.5 fill-current" />
+                            </span>
+                          </Tooltip>
+                        )}{" "}
+                        Completed
+                      </span>
+                    ) : (
+                      cycleStatus
+                    )}
+                  </span>
+
+                  {cycleStatus !== "draft" && (
+                    <div className="flex items-center justify-start gap-2 text-custom-text-200">
+                      <div className="flex items-start gap-1 whitespace-nowrap">
+                        <CalendarDaysIcon className="h-4 w-4" />
+                        <span>{renderShortDateWithYearFormat(startDate)}</span>
+                      </div>
+                      <ArrowRightIcon className="h-4 w-4" />
+                      <div className="flex items-start gap-1 whitespace-nowrap">
+                        <TargetIcon className="h-4 w-4" />
+                        <span>{renderShortDateWithYearFormat(endDate)}</span>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="flex items-center gap-2.5 text-custom-text-200">
+                    {cycle.owned_by.avatar && cycle.owned_by.avatar !== "" ? (
+                      <img
+                        src={cycle.owned_by.avatar}
+                        height={16}
+                        width={16}
+                        className="rounded-full"
+                        alt={cycle.owned_by.display_name}
+                      />
+                    ) : (
+                      <span className="flex h-5 w-5 items-center justify-center rounded-full bg-orange-300 capitalize text-white">
+                        {cycle.owned_by.display_name.charAt(0)}
+                      </span>
+                    )}
+                  </div>
+                  <Tooltip
+                    position="top-right"
+                    tooltipContent={
+                      <div className="flex w-80 items-center gap-2 px-4 py-1">
+                        <span>Progress</span>
+                        <LinearProgressIndicator data={progressIndicatorData} />
+                      </div>
+                    }
+                  >
+                    <span
+                      className={`rounded-md px-1.5 py-1
+                    ${
+                      cycleStatus === "current"
+                        ? "border border-green-600 bg-green-600/5 text-green-600"
+                        : cycleStatus === "upcoming"
+                        ? "border border-orange-300 bg-orange-300/5 text-orange-300"
+                        : cycleStatus === "completed"
+                        ? "border border-blue-500 bg-blue-500/5 text-blue-500"
+                        : cycleStatus === "draft"
+                        ? "border border-neutral-400 bg-neutral-400/5 text-neutral-400"
+                        : ""
+                    }`}
+                    >
+                      {cycleStatus === "current" ? (
+                        <span className="flex gap-1 whitespace-nowrap">
+                          {cycle.total_issues > 0 ? (
+                            <>
+                              <RadialProgressBar progress={(cycle.completed_issues / cycle.total_issues) * 100} />
+                              <span>{Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} %</span>
+                            </>
+                          ) : (
+                            <span className="normal-case">No issues present</span>
+                          )}
+                        </span>
+                      ) : cycleStatus === "upcoming" ? (
+                        <span className="flex gap-1">
+                          <RadialProgressBar progress={100} /> Yet to start
+                        </span>
+                      ) : cycleStatus === "completed" ? (
+                        <span className="flex gap-1">
+                          <RadialProgressBar progress={100} />
+                          <span>{100} %</span>
+                        </span>
+                      ) : (
+                        <span className="flex gap-1">
+                          <RadialProgressBar progress={(cycle.total_issues / cycle.completed_issues) * 100} />
+                          {cycleStatus}
+                        </span>
+                      )}
+                    </span>
+                  </Tooltip>
+                  {cycle.is_favorite ? (
+                    <button type="button" onClick={handleRemoveFromFavorites}>
+                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                    </button>
+                  ) : (
+                    <button type="button" onClick={handleAddToFavorites}>
+                      <StarIcon className="h-4 w-4 " color="rgb(var(--color-text-200))" />
+                    </button>
+                  )}
+                  <div className="flex items-center">
+                    <CustomMenu width="auto" verticalEllipsis>
+                      {!isCompleted && (
+                        <CustomMenu.MenuItem onClick={handleEditCycle}>
+                          <span className="flex items-center justify-start gap-2">
+                            <PencilIcon className="h-4 w-4" />
+                            <span>Edit Cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      )}
+                      {!isCompleted && (
+                        <CustomMenu.MenuItem onClick={handleDeleteCycle}>
+                          <span className="flex items-center justify-start gap-2">
+                            <TrashIcon className="h-4 w-4" />
+                            <span>Delete cycle</span>
+                          </span>
+                        </CustomMenu.MenuItem>
+                      )}
+                      <CustomMenu.MenuItem onClick={handleCopyText}>
+                        <span className="flex items-center justify-start gap-2">
+                          <LinkIcon className="h-4 w-4" />
+                          <span>Copy cycle link</span>
+                        </span>
+                      </CustomMenu.MenuItem>
+                    </CustomMenu>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </a>
+        </Link>
+      </div>
+    </div>
+  );
+};
diff --git a/web/components/cycles/cycles-list.tsx b/web/components/cycles/cycles-list.tsx
new file mode 100644
index 000000000..ec8a40837
--- /dev/null
+++ b/web/components/cycles/cycles-list.tsx
@@ -0,0 +1,70 @@
+import { FC } from "react";
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { ICycle } from "types";
+import { CyclesListItem } from "./cycles-list-item";
+
+export interface ICyclesList {
+  cycles: ICycle[];
+  filter: string;
+}
+
+export const CyclesList: FC<ICyclesList> = (props) => {
+  const { cycles, filter } = props;
+
+  return (
+    <div>
+      {cycles ? (
+        <>
+          {cycles.length > 0 ? (
+            <div className="divide-y divide-custom-border-200">
+              {cycles.map((cycle) => (
+                <div className="hover:bg-custom-background-80" key={cycle.id}>
+                  <div className="flex flex-col border-custom-border-200">
+                    <CyclesListItem cycle={cycle} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <div className="h-full grid place-items-center text-center">
+              <div className="space-y-2">
+                <div className="mx-auto flex justify-center">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
+                    <circle cx="34.375" cy="34.375" r="22" stroke="rgb(var(--color-text-400))" strokeLinecap="round" />
+                    <path
+                      d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
+                      fill="rgb(var(--color-text-400))"
+                    />
+                  </svg>
+                </div>
+                <h4 className="text-sm text-custom-text-200">
+                  {filter === "all" ? "No cycles" : `No ${filter} cycles`}
+                </h4>
+                <button
+                  type="button"
+                  className="text-custom-primary-100 text-sm outline-none"
+                  onClick={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "q",
+                    });
+                    document.dispatchEvent(e);
+                  }}
+                >
+                  Create a new cycle
+                </button>
+              </div>
+            </div>
+          )}
+        </>
+      ) : (
+        <Loader className="space-y-4">
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+        </Loader>
+      )}
+    </div>
+  );
+};
diff --git a/web/components/cycles/cycles-list/all-cycles-list.tsx b/web/components/cycles/cycles-list/all-cycles-list.tsx
deleted file mode 100644
index 26bf0799c..000000000
--- a/web/components/cycles/cycles-list/all-cycles-list.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// components
-import { CyclesView } from "components/cycles";
-// fetch-keys
-import { CYCLES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  viewType: string | null;
-};
-
-export const AllCyclesList: React.FC<Props> = ({ viewType }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: allCyclesList, mutate } = useSWR(
-    workspaceSlug && projectId ? CYCLES_LIST(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(workspaceSlug.toString(), projectId.toString(), "all")
-      : null
-  );
-
-  return <CyclesView cycles={allCyclesList} mutateCycles={mutate} viewType={viewType} />;
-};
diff --git a/web/components/cycles/cycles-list/completed-cycles-list.tsx b/web/components/cycles/cycles-list/completed-cycles-list.tsx
deleted file mode 100644
index 552596d93..000000000
--- a/web/components/cycles/cycles-list/completed-cycles-list.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// components
-import { CyclesView } from "components/cycles";
-// fetch-keys
-import { COMPLETED_CYCLES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  viewType: string | null;
-};
-
-export const CompletedCyclesList: React.FC<Props> = ({ viewType }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: completedCyclesList, mutate } = useSWR(
-    workspaceSlug && projectId ? COMPLETED_CYCLES_LIST(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            "completed"
-          )
-      : null
-  );
-
-  return <CyclesView cycles={completedCyclesList} mutateCycles={mutate} viewType={viewType} />;
-};
diff --git a/web/components/cycles/cycles-list/draft-cycles-list.tsx b/web/components/cycles/cycles-list/draft-cycles-list.tsx
deleted file mode 100644
index 05815dc9c..000000000
--- a/web/components/cycles/cycles-list/draft-cycles-list.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// components
-import { CyclesView } from "components/cycles";
-// fetch-keys
-import { DRAFT_CYCLES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  viewType: string | null;
-};
-
-export const DraftCyclesList: React.FC<Props> = ({ viewType }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: draftCyclesList, mutate } = useSWR(
-    workspaceSlug && projectId ? DRAFT_CYCLES_LIST(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(workspaceSlug.toString(), projectId.toString(), "draft")
-      : null
-  );
-
-  return <CyclesView cycles={draftCyclesList} mutateCycles={mutate} viewType={viewType} />;
-};
diff --git a/web/components/cycles/cycles-list/index.ts b/web/components/cycles/cycles-list/index.ts
deleted file mode 100644
index b4b4fdfb5..000000000
--- a/web/components/cycles/cycles-list/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./all-cycles-list";
-export * from "./completed-cycles-list";
-export * from "./draft-cycles-list";
-export * from "./upcoming-cycles-list";
diff --git a/web/components/cycles/cycles-list/upcoming-cycles-list.tsx b/web/components/cycles/cycles-list/upcoming-cycles-list.tsx
deleted file mode 100644
index eba212af2..000000000
--- a/web/components/cycles/cycles-list/upcoming-cycles-list.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// components
-import { CyclesView } from "components/cycles";
-// fetch-keys
-import { UPCOMING_CYCLES_LIST } from "constants/fetch-keys";
-
-type Props = {
-  viewType: string | null;
-};
-
-export const UpcomingCyclesList: React.FC<Props> = ({ viewType }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { data: upcomingCyclesList, mutate } = useSWR(
-    workspaceSlug && projectId ? UPCOMING_CYCLES_LIST(projectId.toString()) : null,
-    workspaceSlug && projectId
-      ? () =>
-          cyclesService.getCyclesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            "upcoming"
-          )
-      : null
-  );
-
-  return <CyclesView cycles={upcomingCyclesList} mutateCycles={mutate} viewType={viewType} />;
-};
diff --git a/web/components/cycles/cycles-view-legacy.tsx b/web/components/cycles/cycles-view-legacy.tsx
new file mode 100644
index 000000000..55c67524b
--- /dev/null
+++ b/web/components/cycles/cycles-view-legacy.tsx
@@ -0,0 +1,255 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import { KeyedMutator, mutate } from "swr";
+// services
+import { CycleService } from "services/cycle.service";
+// hooks
+import useToast from "hooks/use-toast";
+import useUserAuth from "hooks/use-user-auth";
+import useLocalStorage from "hooks/use-local-storage";
+// components
+import {
+  CreateUpdateCycleModal,
+  CyclesListGanttChartView,
+  DeleteCycleModal,
+  SingleCycleCard,
+  SingleCycleList,
+} from "components/cycles";
+// ui
+import { Loader } from "@plane/ui";
+// helpers
+import { getDateRangeStatus } from "helpers/date-time.helper";
+// types
+import { ICycle } from "types";
+// fetch-keys
+import {
+  COMPLETED_CYCLES_LIST,
+  CURRENT_CYCLE_LIST,
+  CYCLES_LIST,
+  DRAFT_CYCLES_LIST,
+  UPCOMING_CYCLES_LIST,
+} from "constants/fetch-keys";
+
+type Props = {
+  cycles: ICycle[] | undefined;
+  mutateCycles?: KeyedMutator<ICycle[]>;
+  viewType: string | null;
+};
+
+const cycleService = new CycleService();
+
+export const CyclesView: React.FC<Props> = ({ cycles, mutateCycles, viewType }) => {
+  const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false);
+  const [selectedCycleToUpdate, setSelectedCycleToUpdate] = useState<ICycle | null>(null);
+
+  const [deleteCycleModal, setDeleteCycleModal] = useState(false);
+  const [selectedCycleToDelete, setSelectedCycleToDelete] = useState<ICycle | null>(null);
+
+  const { storedValue: cycleTab } = useLocalStorage("cycle_tab", "all");
+  console.log("cycleTab", cycleTab);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { user } = useUserAuth();
+  const { setToastAlert } = useToast();
+
+  const handleEditCycle = (cycle: ICycle) => {
+    setSelectedCycleToUpdate(cycle);
+    setCreateUpdateCycleModal(true);
+  };
+
+  const handleDeleteCycle = (cycle: ICycle) => {
+    setSelectedCycleToDelete(cycle);
+    setDeleteCycleModal(true);
+  };
+
+  const handleAddToFavorites = (cycle: ICycle) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+
+    const fetchKey =
+      cycleStatus === "current"
+        ? CURRENT_CYCLE_LIST(projectId as string)
+        : cycleStatus === "upcoming"
+        ? UPCOMING_CYCLES_LIST(projectId as string)
+        : cycleStatus === "completed"
+        ? COMPLETED_CYCLES_LIST(projectId as string)
+        : DRAFT_CYCLES_LIST(projectId as string);
+
+    mutate<ICycle[]>(
+      fetchKey,
+      (prevData) =>
+        (prevData ?? []).map((c) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? true : c.is_favorite,
+        })),
+      false
+    );
+
+    mutate(
+      CYCLES_LIST(projectId as string),
+      (prevData: any) =>
+        (prevData ?? []).map((c: any) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? true : c.is_favorite,
+        })),
+      false
+    );
+
+    cycleService
+      .addCycleToFavorites(workspaceSlug as string, projectId as string, {
+        cycle: cycle.id,
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Couldn't add the cycle to favorites. Please try again.",
+        });
+      });
+  };
+
+  const handleRemoveFromFavorites = (cycle: ICycle) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
+
+    const fetchKey =
+      cycleStatus === "current"
+        ? CURRENT_CYCLE_LIST(projectId as string)
+        : cycleStatus === "upcoming"
+        ? UPCOMING_CYCLES_LIST(projectId as string)
+        : cycleStatus === "completed"
+        ? COMPLETED_CYCLES_LIST(projectId as string)
+        : DRAFT_CYCLES_LIST(projectId as string);
+
+    mutate<ICycle[]>(
+      fetchKey,
+      (prevData) =>
+        (prevData ?? []).map((c) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? false : c.is_favorite,
+        })),
+      false
+    );
+
+    mutate(
+      CYCLES_LIST(projectId as string),
+      (prevData: any) =>
+        (prevData ?? []).map((c: any) => ({
+          ...c,
+          is_favorite: c.id === cycle.id ? false : c.is_favorite,
+        })),
+      false
+    );
+
+    cycleService.removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the cycle from favorites. Please try again.",
+      });
+    });
+  };
+
+  return (
+    <>
+      <CreateUpdateCycleModal
+        isOpen={createUpdateCycleModal}
+        handleClose={() => setCreateUpdateCycleModal(false)}
+        data={selectedCycleToUpdate}
+        user={user}
+      />
+      <DeleteCycleModal
+        isOpen={deleteCycleModal}
+        setIsOpen={setDeleteCycleModal}
+        data={selectedCycleToDelete}
+        user={user}
+      />
+      {cycles ? (
+        cycles.length > 0 ? (
+          viewType === "list" ? (
+            <div className="divide-y divide-custom-border-200">
+              {cycles.map((cycle) => (
+                <div className="hover:bg-custom-background-80">
+                  <div className="flex flex-col border-custom-border-200">
+                    <SingleCycleList
+                      key={cycle.id}
+                      cycle={cycle}
+                      handleDeleteCycle={() => handleDeleteCycle(cycle)}
+                      handleEditCycle={() => handleEditCycle(cycle)}
+                      handleAddToFavorites={() => handleAddToFavorites(cycle)}
+                      handleRemoveFromFavorites={() => handleRemoveFromFavorites(cycle)}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : viewType === "board" ? (
+            <div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
+              {cycles.map((cycle) => (
+                <SingleCycleCard
+                  key={cycle.id}
+                  cycle={cycle}
+                  handleDeleteCycle={() => handleDeleteCycle(cycle)}
+                  handleEditCycle={() => handleEditCycle(cycle)}
+                  handleAddToFavorites={() => handleAddToFavorites(cycle)}
+                  handleRemoveFromFavorites={() => handleRemoveFromFavorites(cycle)}
+                />
+              ))}
+            </div>
+          ) : (
+            <CyclesListGanttChartView cycles={cycles ?? []} mutateCycles={mutateCycles} />
+          )
+        ) : (
+          <div className="h-full grid place-items-center text-center">
+            <div className="space-y-2">
+              <div className="mx-auto flex justify-center">
+                <svg xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66" fill="none">
+                  <circle cx="34.375" cy="34.375" r="22" stroke="rgb(var(--color-text-400))" strokeLinecap="round" />
+                  <path
+                    d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
+                    fill="rgb(var(--color-text-400))"
+                  />
+                </svg>
+              </div>
+              <h4 className="text-sm text-custom-text-200">
+                {cycleTab === "all" ? "No cycles" : `No ${cycleTab} cycles`}
+              </h4>
+              <button
+                type="button"
+                className="text-custom-primary-100 text-sm outline-none"
+                onClick={() => {
+                  const e = new KeyboardEvent("keydown", {
+                    key: "q",
+                  });
+                  document.dispatchEvent(e);
+                }}
+              >
+                Create a new cycle
+              </button>
+            </div>
+          </div>
+        )
+      ) : viewType === "list" ? (
+        <Loader className="space-y-4">
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+          <Loader.Item height="50px" />
+        </Loader>
+      ) : viewType === "board" ? (
+        <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+          <Loader.Item height="200px" />
+          <Loader.Item height="200px" />
+          <Loader.Item height="200px" />
+        </Loader>
+      ) : (
+        <Loader>
+          <Loader.Item height="300px" />
+        </Loader>
+      )}
+    </>
+  );
+};
diff --git a/web/components/cycles/cycles-view.tsx b/web/components/cycles/cycles-view.tsx
index f6d0ab512..2404c27da 100644
--- a/web/components/cycles/cycles-view.tsx
+++ b/web/components/cycles/cycles-view.tsx
@@ -1,271 +1,61 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import { KeyedMutator, mutate } from "swr";
-
-// services
-import cyclesService from "services/cycles.service";
-// hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
-import useLocalStorage from "hooks/use-local-storage";
+import { FC } from "react";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import {
-  CreateUpdateCycleModal,
-  CyclesListGanttChartView,
-  DeleteCycleModal,
-  SingleCycleCard,
-  SingleCycleList,
-} from "components/cycles";
-// ui
-import { Loader } from "components/ui";
-// helpers
-import { getDateRangeStatus } from "helpers/date-time.helper";
-// types
-import { ICycle } from "types";
-// fetch-keys
-import {
-  COMPLETED_CYCLES_LIST,
-  CURRENT_CYCLE_LIST,
-  CYCLES_LIST,
-  DRAFT_CYCLES_LIST,
-  UPCOMING_CYCLES_LIST,
-} from "constants/fetch-keys";
+import { CyclesBoard, CyclesList } from "components/cycles";
+import { Loader } from "@plane/ui";
 
-type Props = {
-  cycles: ICycle[] | undefined;
-  mutateCycles: KeyedMutator<ICycle[]>;
-  viewType: string | null;
-};
+export interface ICyclesView {
+  filter: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete";
+  view: "list" | "board" | "gantt";
+  workspaceSlug: string;
+  projectId: string;
+}
 
-export const CyclesView: React.FC<Props> = ({ cycles, mutateCycles, viewType }) => {
-  const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false);
-  const [selectedCycleToUpdate, setSelectedCycleToUpdate] = useState<ICycle | null>(null);
+export const CyclesView: FC<ICyclesView> = observer((props) => {
+  const { filter, view, workspaceSlug, projectId } = props;
+  // store
+  const { cycle: cycleStore } = useMobxStore();
+  // api call to fetch cycles list
+  const { isLoading } = useSWR(
+    workspaceSlug && projectId ? `CYCLES_LIST_${projectId}_${filter}` : null,
+    workspaceSlug && projectId ? () => cycleStore.fetchCycles(workspaceSlug, projectId, filter) : null
+  );
 
-  const [deleteCycleModal, setDeleteCycleModal] = useState(false);
-  const [selectedCycleToDelete, setSelectedCycleToDelete] = useState<ICycle | null>(null);
-
-  const { storedValue: cycleTab } = useLocalStorage("cycleTab", "All");
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { user } = useUserAuth();
-  const { setToastAlert } = useToast();
-
-  const handleEditCycle = (cycle: ICycle) => {
-    setSelectedCycleToUpdate(cycle);
-    setCreateUpdateCycleModal(true);
-  };
-
-  const handleDeleteCycle = (cycle: ICycle) => {
-    setSelectedCycleToDelete(cycle);
-    setDeleteCycleModal(true);
-  };
-
-  const handleAddToFavorites = (cycle: ICycle) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-
-    const fetchKey =
-      cycleStatus === "current"
-        ? CURRENT_CYCLE_LIST(projectId as string)
-        : cycleStatus === "upcoming"
-        ? UPCOMING_CYCLES_LIST(projectId as string)
-        : cycleStatus === "completed"
-        ? COMPLETED_CYCLES_LIST(projectId as string)
-        : DRAFT_CYCLES_LIST(projectId as string);
-
-    mutate<ICycle[]>(
-      fetchKey,
-      (prevData) =>
-        (prevData ?? []).map((c) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? true : c.is_favorite,
-        })),
-      false
-    );
-
-    mutate(
-      CYCLES_LIST(projectId as string),
-      (prevData: any) =>
-        (prevData ?? []).map((c: any) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? true : c.is_favorite,
-        })),
-      false
-    );
-
-    cyclesService
-      .addCycleToFavorites(workspaceSlug as string, projectId as string, {
-        cycle: cycle.id,
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't add the cycle to favorites. Please try again.",
-        });
-      });
-  };
-
-  const handleRemoveFromFavorites = (cycle: ICycle) => {
-    if (!workspaceSlug || !projectId) return;
-
-    const cycleStatus = getDateRangeStatus(cycle.start_date, cycle.end_date);
-
-    const fetchKey =
-      cycleStatus === "current"
-        ? CURRENT_CYCLE_LIST(projectId as string)
-        : cycleStatus === "upcoming"
-        ? UPCOMING_CYCLES_LIST(projectId as string)
-        : cycleStatus === "completed"
-        ? COMPLETED_CYCLES_LIST(projectId as string)
-        : DRAFT_CYCLES_LIST(projectId as string);
-
-    mutate<ICycle[]>(
-      fetchKey,
-      (prevData) =>
-        (prevData ?? []).map((c) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? false : c.is_favorite,
-        })),
-      false
-    );
-
-    mutate(
-      CYCLES_LIST(projectId as string),
-      (prevData: any) =>
-        (prevData ?? []).map((c: any) => ({
-          ...c,
-          is_favorite: c.id === cycle.id ? false : c.is_favorite,
-        })),
-      false
-    );
-
-    cyclesService
-      .removeCycleFromFavorites(workspaceSlug as string, projectId as string, cycle.id)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't remove the cycle from favorites. Please try again.",
-        });
-      });
-  };
+  const cyclesList = cycleStore.cycles?.[projectId];
+  console.log("cyclesList", cyclesList);
 
   return (
     <>
-      <CreateUpdateCycleModal
-        isOpen={createUpdateCycleModal}
-        handleClose={() => setCreateUpdateCycleModal(false)}
-        data={selectedCycleToUpdate}
-        user={user}
-      />
-      <DeleteCycleModal
-        isOpen={deleteCycleModal}
-        setIsOpen={setDeleteCycleModal}
-        data={selectedCycleToDelete}
-        user={user}
-      />
-      {cycles ? (
-        cycles.length > 0 ? (
-          viewType === "list" ? (
-            <div className="divide-y divide-custom-border-200">
-              {cycles.map((cycle) => (
-                <div className="hover:bg-custom-background-80">
-                  <div className="flex flex-col border-custom-border-200">
-                    <SingleCycleList
-                      key={cycle.id}
-                      cycle={cycle}
-                      handleDeleteCycle={() => handleDeleteCycle(cycle)}
-                      handleEditCycle={() => handleEditCycle(cycle)}
-                      handleAddToFavorites={() => handleAddToFavorites(cycle)}
-                      handleRemoveFromFavorites={() => handleRemoveFromFavorites(cycle)}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          ) : viewType === "board" ? (
-            <div className="grid grid-cols-1 gap-9 lg:grid-cols-2 xl:grid-cols-3">
-              {cycles.map((cycle) => (
-                <SingleCycleCard
-                  key={cycle.id}
-                  cycle={cycle}
-                  handleDeleteCycle={() => handleDeleteCycle(cycle)}
-                  handleEditCycle={() => handleEditCycle(cycle)}
-                  handleAddToFavorites={() => handleAddToFavorites(cycle)}
-                  handleRemoveFromFavorites={() => handleRemoveFromFavorites(cycle)}
-                />
-              ))}
-            </div>
+      {view === "list" && (
+        <>
+          {!isLoading ? (
+            <CyclesList cycles={cyclesList} filter={filter} />
           ) : (
-            <CyclesListGanttChartView cycles={cycles ?? []} mutateCycles={mutateCycles} />
-          )
-        ) : (
-          <div className="h-full grid place-items-center text-center">
-            <div className="space-y-2">
-              <div className="mx-auto flex justify-center">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="66"
-                  height="66"
-                  viewBox="0 0 66 66"
-                  fill="none"
-                >
-                  <circle
-                    cx="34.375"
-                    cy="34.375"
-                    r="22"
-                    stroke="rgb(var(--color-text-400))"
-                    strokeLinecap="round"
-                  />
-                  <path
-                    d="M36.4375 20.9919C36.4375 19.2528 37.6796 17.8127 39.1709 18.1419C40.125 18.3526 41.0604 18.6735 41.9625 19.1014C43.7141 19.9322 45.3057 21.1499 46.6464 22.685C47.987 24.2202 49.0505 26.0426 49.776 28.0484C50.5016 30.0541 50.875 32.2038 50.875 34.3748C50.875 36.5458 50.5016 38.6956 49.776 40.7013C49.0505 42.7071 47.987 44.5295 46.6464 46.0647C45.3057 47.5998 43.7141 48.8175 41.9625 49.6483C41.0604 50.0762 40.125 50.3971 39.1709 50.6077C37.6796 50.937 36.4375 49.4969 36.4375 47.7578L36.4375 20.9919Z"
-                    fill="rgb(var(--color-text-400))"
-                  />
-                </svg>
-              </div>
-              <h4 className="text-sm text-custom-text-200">
-                {cycleTab === "All"
-                  ? "No cycles"
-                  : `No ${cycleTab === "Drafts" ? "draft" : cycleTab?.toLowerCase()} cycles`}
-              </h4>
-              <button
-                type="button"
-                className="text-custom-primary-100 text-sm outline-none"
-                onClick={() => {
-                  const e = new KeyboardEvent("keydown", {
-                    key: "q",
-                  });
-                  document.dispatchEvent(e);
-                }}
-              >
-                Create a new cycle
-              </button>
-            </div>
-          </div>
-        )
-      ) : viewType === "list" ? (
-        <Loader className="space-y-4">
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-          <Loader.Item height="50px" />
-        </Loader>
-      ) : viewType === "board" ? (
-        <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-          <Loader.Item height="200px" />
-          <Loader.Item height="200px" />
-          <Loader.Item height="200px" />
-        </Loader>
-      ) : (
-        <Loader>
-          <Loader.Item height="300px" />
-        </Loader>
+            <Loader className="space-y-4">
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+              <Loader.Item height="50px" />
+            </Loader>
+          )}
+        </>
       )}
+      {view === "board" && (
+        <>
+          {!isLoading ? (
+            <CyclesBoard cycles={cyclesList} filter={filter} />
+          ) : (
+            <Loader className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+              <Loader.Item height="200px" />
+              <Loader.Item height="200px" />
+              <Loader.Item height="200px" />
+            </Loader>
+          )}
+        </>
+      )}
+      {view === "gantt" && <CyclesList cycles={cyclesList} filter={filter} />}
     </>
   );
-};
+});
diff --git a/web/components/cycles/delete-cycle-modal.tsx b/web/components/cycles/delete-cycle-modal.tsx
index 35b8e118e..7c219fec6 100644
--- a/web/components/cycles/delete-cycle-modal.tsx
+++ b/web/components/cycles/delete-cycle-modal.tsx
@@ -6,20 +6,20 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import cycleService from "services/cycles.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
-import type { ICurrentUserResponse, ICycle, IProject } from "types";
+import type { IUser, ICycle, IProject } from "types";
 type TConfirmCycleDeletionProps = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   data?: ICycle | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 // fetch-keys
 import {
@@ -32,12 +32,10 @@ import {
 } from "constants/fetch-keys";
 import { getDateRangeStatus } from "helpers/date-time.helper";
 
-export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
-  isOpen,
-  setIsOpen,
-  data,
-  user,
-}) => {
+// services
+const cycleService = new CycleService();
+
+export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({ isOpen, setIsOpen, data, user }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
@@ -144,36 +142,29 @@ export const DeleteCycleModal: React.FC<TConfirmCycleDeletionProps> = ({
                 <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"
-                      />
+                      <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"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Delete Cycle
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete cycle-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the cycle will be permanently removed. This
-                          action cannot be undone.
+                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
+                          data related to the cycle 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}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/cycles/form.tsx b/web/components/cycles/form.tsx
index 4643a58bc..c4188ea00 100644
--- a/web/components/cycles/form.tsx
+++ b/web/components/cycles/form.tsx
@@ -1,50 +1,33 @@
-import { useEffect } from "react";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-
 // ui
-import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
+import { DateSelect } from "components/ui";
 // types
 import { ICycle } from "types";
 
 type Props = {
   handleFormSubmit: (values: Partial<ICycle>) => Promise<void>;
   handleClose: () => void;
-  status: boolean;
   data?: ICycle | null;
 };
 
-const defaultValues: Partial<ICycle> = {
-  name: "",
-  description: "",
-  start_date: null,
-  end_date: null,
-};
-
-export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
+export const CycleForm: React.FC<Props> = (props) => {
+  const { handleFormSubmit, handleClose, data } = props;
+  // form data
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     control,
-    reset,
     watch,
   } = useForm<ICycle>({
-    defaultValues,
+    defaultValues: {
+      name: data?.name || "",
+      description: data?.description || "",
+      start_date: data?.start_date || null,
+      end_date: data?.end_date || null,
+    },
   });
 
-  const handleCreateUpdateCycle = async (formData: Partial<ICycle>) => {
-    await handleFormSubmit(formData);
-  };
-
-  useEffect(() => {
-    reset({
-      ...defaultValues,
-      ...data,
-    });
-  }, [data, reset]);
-
   const startDate = watch("start_date");
   const endDate = watch("end_date");
 
@@ -55,39 +38,50 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
   maxDate?.setDate(maxDate.getDate() - 1);
 
   return (
-    <form onSubmit={handleSubmit(handleCreateUpdateCycle)}>
+    <form onSubmit={handleSubmit(handleFormSubmit)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-          {status ? "Update" : "Create"} Cycle
-        </h3>
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Cycle</h3>
         <div className="space-y-3">
           <div>
-            <Input
-              autoComplete="off"
-              id="name"
+            <Controller
               name="name"
-              type="name"
-              className="resize-none text-xl"
-              placeholder="Title"
-              error={errors.name}
-              register={register}
-              validations={{
+              control={control}
+              rules={{
                 required: "Name is required",
                 maxLength: {
                   value: 255,
                   message: "Name should be less than 255 characters",
                 },
               }}
+              render={({ field: { value, onChange } }) => (
+                <Input
+                  id="cycle_name"
+                  name="name"
+                  type="text"
+                  placeholder="Cycle Name"
+                  className="resize-none text-xl w-full p-2"
+                  value={value}
+                  onChange={onChange}
+                  hasError={Boolean(errors?.name)}
+                />
+              )}
             />
           </div>
           <div>
-            <TextArea
-              id="description"
+            <Controller
               name="description"
-              placeholder="Description"
-              className="h-32 resize-none text-sm"
-              error={errors.description}
-              register={register}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="cycle_description"
+                  name="description"
+                  placeholder="Description"
+                  className="h-32 resize-none text-sm"
+                  hasError={Boolean(errors?.description)}
+                  value={value}
+                  onChange={onChange}
+                />
+              )}
             />
           </div>
 
@@ -112,12 +106,7 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
                 control={control}
                 name="end_date"
                 render={({ field: { value, onChange } }) => (
-                  <DateSelect
-                    label="End date"
-                    value={value}
-                    onChange={(val) => onChange(val)}
-                    minDate={minDate}
-                  />
+                  <DateSelect label="End date" value={value} onChange={(val) => onChange(val)} minDate={minDate} />
                 )}
               />
             </div>
@@ -125,16 +114,18 @@ export const CycleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, stat
         </div>
       </div>
       <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
-          {status
+        <Button variant="neutral-primary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
+          {data
             ? isSubmitting
               ? "Updating Cycle..."
               : "Update Cycle"
             : isSubmitting
             ? "Creating Cycle..."
             : "Create Cycle"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/cycles/gantt-chart/blocks.tsx b/web/components/cycles/gantt-chart/blocks.tsx
index 9d90c0adf..bb8330cb6 100644
--- a/web/components/cycles/gantt-chart/blocks.tsx
+++ b/web/components/cycles/gantt-chart/blocks.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import { ContrastIcon } from "components/icons";
 // helpers
@@ -44,9 +44,7 @@ export const CycleGanttBlock = ({ data }: { data: ICycle }) => {
         }
         position="top-left"
       >
-        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-          {data?.name}
-        </div>
+        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">{data?.name}</div>
       </Tooltip>
     </div>
   );
diff --git a/web/components/cycles/gantt-chart/cycle-issues-layout.tsx b/web/components/cycles/gantt-chart/cycle-issues-layout.tsx
deleted file mode 100644
index b70b16f03..000000000
--- a/web/components/cycles/gantt-chart/cycle-issues-layout.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { useRouter } from "next/router";
-
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-import useUser from "hooks/use-user";
-import useGanttChartCycleIssues from "hooks/gantt-chart/cycle-issues-view";
-import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
-import useProjectDetails from "hooks/use-project-details";
-// components
-import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock, IssuePeekOverview } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = {
-  disableUserActions: boolean;
-};
-
-export const CycleIssuesGanttChartView: React.FC<Props> = ({ disableUserActions }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId } = router.query;
-
-  const { displayFilters } = useIssuesView();
-
-  const { user } = useUser();
-  const { projectDetails } = useProjectDetails();
-
-  const { ganttIssues, mutateGanttIssues } = useGanttChartCycleIssues(
-    workspaceSlug as string,
-    projectId as string,
-    cycleId as string
-  );
-
-  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
-
-  return (
-    <>
-      <IssuePeekOverview
-        handleMutation={() => mutateGanttIssues()}
-        projectId={projectId?.toString() ?? ""}
-        workspaceSlug={workspaceSlug?.toString() ?? ""}
-        readOnly={disableUserActions}
-      />
-      <div className="w-full h-full">
-        <GanttChartRoot
-          border={false}
-          title="Issues"
-          loaderTitle="Issues"
-          blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
-          blockUpdateHandler={(block, payload) =>
-            updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
-          }
-          SidebarBlockRender={IssueGanttSidebarBlock}
-          BlockRender={IssueGanttBlock}
-          enableBlockLeftResize={isAllowed}
-          enableBlockRightResize={isAllowed}
-          enableBlockMove={isAllowed}
-          enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
-          bottomSpacing
-        />
-      </div>
-    </>
-  );
-};
diff --git a/web/components/cycles/gantt-chart/cycles-list-layout.tsx b/web/components/cycles/gantt-chart/cycles-list-layout.tsx
index 41e7a5444..b994c8f39 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/cycles.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useUser from "hooks/use-user";
 import useProjectDetails from "hooks/use-project-details";
@@ -17,9 +17,12 @@ import { ICycle } from "types";
 
 type Props = {
   cycles: ICycle[];
-  mutateCycles: KeyedMutator<ICycle[]>;
+  mutateCycles?: KeyedMutator<ICycle[]>;
 };
 
+// services
+const cycleService = new CycleService();
+
 export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -29,43 +32,40 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles, mutateCycles }) =>
 
   const handleCycleUpdate = (cycle: ICycle, payload: IBlockUpdateData) => {
     if (!workspaceSlug || !user) return;
+    mutateCycles &&
+      mutateCycles((prevData: any) => {
+        if (!prevData) return prevData;
 
-    mutateCycles((prevData: any) => {
-      if (!prevData) return prevData;
+        const newList = prevData.map((p: any) => ({
+          ...p,
+          ...(p.id === cycle.id
+            ? {
+                start_date: payload.start_date ? payload.start_date : p.start_date,
+                target_date: payload.target_date ? payload.target_date : p.end_date,
+                sort_order: payload.sort_order ? payload.sort_order.newSortOrder : p.sort_order,
+              }
+            : {}),
+        }));
 
-      const newList = prevData.map((p: any) => ({
-        ...p,
-        ...(p.id === cycle.id
-          ? {
-              start_date: payload.start_date ? payload.start_date : p.start_date,
-              target_date: payload.target_date ? payload.target_date : p.end_date,
-              sort_order: payload.sort_order ? payload.sort_order.newSortOrder : p.sort_order,
-            }
-          : {}),
-      }));
+        if (payload.sort_order) {
+          const removedElement = newList.splice(payload.sort_order.sourceIndex, 1)[0];
+          newList.splice(payload.sort_order.destinationIndex, 0, removedElement);
+        }
 
-      if (payload.sort_order) {
-        const removedElement = newList.splice(payload.sort_order.sourceIndex, 1)[0];
-        newList.splice(payload.sort_order.destinationIndex, 0, removedElement);
-      }
-
-      return newList;
-    }, false);
+        return newList;
+      }, false);
 
     const newPayload: any = { ...payload };
 
-    if (newPayload.sort_order && payload.sort_order)
-      newPayload.sort_order = payload.sort_order.newSortOrder;
+    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[]) =>
     blocks && blocks.length > 0
       ? blocks
-          .filter(
-            (b) => b.start_date && b.end_date && new Date(b.start_date) <= new Date(b.end_date)
-          )
+          .filter((b) => b.start_date && b.end_date && new Date(b.start_date) <= new Date(b.end_date))
           .map((block) => ({
             data: block,
             id: block.id,
diff --git a/web/components/cycles/gantt-chart/index.ts b/web/components/cycles/gantt-chart/index.ts
index e4850b2e2..a0a16086b 100644
--- a/web/components/cycles/gantt-chart/index.ts
+++ b/web/components/cycles/gantt-chart/index.ts
@@ -1,3 +1,2 @@
 export * from "./blocks";
-export * from "./cycle-issues-layout";
 export * from "./cycles-list-layout";
diff --git a/web/components/cycles/index.ts b/web/components/cycles/index.ts
index 4b43b3a74..3f74be500 100644
--- a/web/components/cycles/index.ts
+++ b/web/components/cycles/index.ts
@@ -1,4 +1,4 @@
-export * from "./cycles-list";
+export * from "./cycles-view";
 export * from "./active-cycle-details";
 export * from "./active-cycle-stats";
 export * from "./gantt-chart";
@@ -12,3 +12,8 @@ export * from "./single-cycle-card";
 export * from "./single-cycle-list";
 export * from "./transfer-issues-modal";
 export * from "./transfer-issues";
+export * from "./cycles-list";
+export * from "./cycles-list-item";
+export * from "./cycles-board";
+export * from "./cycles-board-card";
+export * from "./cycles-gantt";
diff --git a/web/components/cycles/modal.tsx b/web/components/cycles/modal.tsx
index 703636256..9a92d267e 100644
--- a/web/components/cycles/modal.tsx
+++ b/web/components/cycles/modal.tsx
@@ -1,13 +1,9 @@
 import { Fragment } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import cycleService from "services/cycles.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -15,7 +11,7 @@ import { CycleForm } from "components/cycles";
 // helper
 import { getDateRangeStatus } from "helpers/date-time.helper";
 // types
-import type { CycleDateCheckData, ICurrentUserResponse, ICycle, IProject } from "types";
+import type { CycleDateCheckData, IUser, ICycle, IProject } from "types";
 // fetch keys
 import {
   COMPLETED_CYCLES_LIST,
@@ -31,15 +27,13 @@ type CycleModalProps = {
   isOpen: boolean;
   handleClose: () => void;
   data?: ICycle | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
-export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
-  isOpen,
-  handleClose,
-  data,
-  user,
-}) => {
+// services
+const cycleService = new CycleService();
+
+export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({ isOpen, handleClose, data, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
@@ -116,10 +110,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
             mutate(DRAFT_CYCLES_LIST(projectId.toString()));
         }
         mutate(CYCLES_LIST(projectId.toString()));
-        if (
-          getDateRangeStatus(data?.start_date, data?.end_date) !=
-          getDateRangeStatus(res.start_date, res.end_date)
-        ) {
+        if (getDateRangeStatus(data?.start_date, data?.end_date) != getDateRangeStatus(res.start_date, res.end_date)) {
           switch (getDateRangeStatus(res.start_date, res.end_date)) {
             case "completed":
               mutate(COMPLETED_CYCLES_LIST(projectId.toString()));
@@ -141,7 +132,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
           message: "Cycle updated successfully.",
         });
       })
-      .catch((err) => {
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -153,11 +144,9 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
   const dateChecker = async (payload: CycleDateCheckData) => {
     let status = false;
 
-    await cycleService
-      .cycleDateCheck(workspaceSlug as string, projectId as string, payload)
-      .then((res) => {
-        status = res.status;
-      });
+    await cycleService.cycleDateCheck(workspaceSlug as string, projectId as string, payload).then((res) => {
+      status = res.status;
+    });
 
     return status;
   };
@@ -194,8 +183,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
       setToastAlert({
         type: "error",
         title: "Error!",
-        message:
-          "You already have a cycle on the given dates, if you want to create a draft cycle, remove the dates.",
+        message: "You already have a cycle on the given dates, if you want to create a draft cycle, remove the dates.",
       });
   };
 
@@ -225,12 +213,7 @@ export const CreateUpdateCycleModal: React.FC<CycleModalProps> = ({
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <CycleForm
-                  handleFormSubmit={handleFormSubmit}
-                  handleClose={handleClose}
-                  status={data ? true : false}
-                  data={data}
-                />
+                <CycleForm handleFormSubmit={handleFormSubmit} handleClose={handleClose} data={data} />
               </Dialog.Panel>
             </Transition.Child>
           </div>
diff --git a/web/components/cycles/select.tsx b/web/components/cycles/select.tsx
index 9241c8a4d..3bd10eae7 100644
--- a/web/components/cycles/select.tsx
+++ b/web/components/cycles/select.tsx
@@ -1,17 +1,13 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 import useUserAuth from "hooks/use-user-auth";
-// headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { CyclesIcon } from "components/icons";
 // services
-import cycleServices from "services/cycles.service";
+import { CycleService } from "services/cycle.service";
 // components
 import { CreateUpdateCycleModal } from "components/cycles";
 // fetch-keys
@@ -24,12 +20,9 @@ export type IssueCycleSelectProps = {
   multiple?: boolean;
 };
 
-export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
-  projectId,
-  value,
-  onChange,
-  multiple = false,
-}) => {
+const cycleService = new CycleService();
+
+export const CycleSelect: React.FC<IssueCycleSelectProps> = ({ projectId, value, onChange, multiple = false }) => {
   // states
   const [isCycleModalActive, setCycleModalActive] = useState(false);
 
@@ -41,7 +34,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
   const { data: cycles } = useSWR(
     workspaceSlug && projectId ? CYCLES_LIST(projectId) : null,
     workspaceSlug && projectId
-      ? () => cycleServices.getCyclesWithParams(workspaceSlug as string, projectId as string, "all")
+      ? () => cycleService.getCyclesWithParams(workspaceSlug as string, projectId as string, "all")
       : null
   );
 
@@ -57,11 +50,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
 
   return (
     <>
-      <CreateUpdateCycleModal
-        isOpen={isCycleModalActive}
-        handleClose={closeCycleModal}
-        user={user}
-      />
+      <CreateUpdateCycleModal isOpen={isCycleModalActive} handleClose={closeCycleModal} user={user} />
       <Listbox as="div" className="relative" value={value} onChange={onChange} multiple={multiple}>
         {({ open }) => (
           <>
@@ -92,10 +81,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
                           key={option.value}
                           className={({ selected, active }) =>
                             `${
-                              selected ||
-                              (Array.isArray(value)
-                                ? value.includes(option.value)
-                                : value === option.value)
+                              selected || (Array.isArray(value) ? value.includes(option.value) : value === option.value)
                                 ? "bg-indigo-50 font-medium"
                                 : ""
                             } ${
@@ -104,9 +90,7 @@ export const CycleSelect: React.FC<IssueCycleSelectProps> = ({
                           }
                           value={option.value}
                         >
-                          <span className={` flex items-center gap-2 truncate`}>
-                            {option.display}
-                          </span>
+                          <span className={` flex items-center gap-2 truncate`}>{option.display}</span>
                         </Listbox.Option>
                       ))
                     ) : (
diff --git a/web/components/cycles/sidebar.tsx b/web/components/cycles/sidebar.tsx
index dafb1b6c2..676f3e06e 100644
--- a/web/components/cycles/sidebar.tsx
+++ b/web/components/cycles/sidebar.tsx
@@ -1,15 +1,11 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { useForm } from "react-hook-form";
 // headless ui
 import { Disclosure, Popover, Transition } from "@headlessui/react";
 // services
-import cyclesService from "services/cycles.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -17,7 +13,8 @@ import { SidebarProgressStats } from "components/core";
 import ProgressChart from "components/core/sidebar/progress-chart";
 import { DeleteCycleModal } from "components/cycles";
 // ui
-import { CustomMenu, CustomRangeDatePicker, Loader, ProgressBar } from "components/ui";
+import { CustomMenu, CustomRangeDatePicker } from "components/ui";
+import { Loader, ProgressBar } from "@plane/ui";
 // icons
 import {
   CalendarDaysIcon,
@@ -32,13 +29,9 @@ import {
 import { ExclamationIcon } from "components/icons";
 // helpers
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
-import {
-  isDateGreaterThanToday,
-  renderDateFormat,
-  renderShortDateWithYearFormat,
-} from "helpers/date-time.helper";
+import { isDateGreaterThanToday, renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import { ICurrentUserResponse, ICycle } from "types";
+import { IUser, ICycle } from "types";
 // fetch-keys
 import { CYCLE_DETAILS } from "constants/fetch-keys";
 
@@ -47,16 +40,12 @@ type Props = {
   isOpen: boolean;
   cycleStatus: string;
   isCompleted: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
-export const CycleDetailsSidebar: React.FC<Props> = ({
-  cycle,
-  isOpen,
-  cycleStatus,
-  isCompleted,
-  user,
-}) => {
+const cycleService = new CycleService();
+
+export const CycleDetailsSidebar: React.FC<Props> = ({ cycle, isOpen, cycleStatus, isCompleted, user }) => {
   const [cycleDeleteModal, setCycleDeleteModal] = useState(false);
 
   const router = useRouter();
@@ -76,21 +65,16 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
   const submitChanges = (data: Partial<ICycle>) => {
     if (!workspaceSlug || !projectId || !cycleId) return;
 
-    mutate<ICycle>(
-      CYCLE_DETAILS(cycleId as string),
-      (prevData) => ({ ...(prevData as ICycle), ...data }),
-      false
-    );
+    mutate<ICycle>(CYCLE_DETAILS(cycleId as string), (prevData) => ({ ...(prevData as ICycle), ...data }), false);
 
-    cyclesService
+    cycleService
       .patchCycle(workspaceSlug as string, projectId as string, cycleId as string, data, user)
       .then(() => mutate(CYCLE_DETAILS(cycleId as string)))
       .catch((e) => console.log(e));
   };
 
   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/${projectId}/cycles/${cycle?.id}`)
       .then(() => {
@@ -116,11 +100,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
 
   const dateChecker = async (payload: any) => {
     try {
-      const res = await cyclesService.cycleDateCheck(
-        workspaceSlug as string,
-        projectId as string,
-        payload
-      );
+      const res = await cycleService.cycleDateCheck(workspaceSlug as string, projectId as string, payload);
       return res.status;
     } catch (err) {
       return false;
@@ -277,20 +257,13 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
   const isStartValid = new Date(`${cycle?.start_date}`) <= new Date();
   const isEndValid = new Date(`${cycle?.end_date}`) >= new Date(`${cycle?.start_date}`);
 
-  const progressPercentage = cycle
-    ? Math.round((cycle.completed_issues / cycle.total_issues) * 100)
-    : null;
+  const progressPercentage = cycle ? Math.round((cycle.completed_issues / cycle.total_issues) * 100) : null;
 
   return (
     <>
-      <DeleteCycleModal
-        isOpen={cycleDeleteModal}
-        setIsOpen={setCycleDeleteModal}
-        data={cycle}
-        user={user}
-      />
+      <DeleteCycleModal isOpen={cycleDeleteModal} setIsOpen={setCycleDeleteModal} data={cycle} user={user} />
       <div
-        className={`fixed top-[66px] ${
+        className={`fixed top-[66px] z-20 ${
           isOpen ? "right-0" : "-right-[24rem]"
         } h-full w-[24rem] overflow-y-auto border-l border-custom-border-200 bg-custom-sidebar-background-100 pt-5 pb-10 duration-300`}
       >
@@ -305,7 +278,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 </div>
                 <div className="relative flex h-full w-52 items-center gap-2">
                   <Popover className="flex h-full items-center justify-center rounded-lg">
-                    {({ open }) => (
+                    {({}) => (
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
@@ -316,9 +289,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                           <CalendarDaysIcon className="h-3 w-3" />
                           <span>
                             {renderShortDateWithYearFormat(
-                              new Date(
-                                `${watch("start_date") ? watch("start_date") : cycle?.start_date}`
-                              ),
+                              new Date(`${watch("start_date") ? watch("start_date") : cycle?.start_date}`),
                               "Start date"
                             )}
                           </span>
@@ -355,7 +326,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                     <ArrowLongRightIcon className="h-3 w-3 text-custom-text-200" />
                   </span>
                   <Popover className="flex h-full items-center justify-center rounded-lg">
-                    {({ open }) => (
+                    {({}) => (
                       <>
                         <Popover.Button
                           disabled={isCompleted ?? false}
@@ -367,9 +338,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
 
                           <span>
                             {renderShortDateWithYearFormat(
-                              new Date(
-                                `${watch("end_date") ? watch("end_date") : cycle?.end_date}`
-                              ),
+                              new Date(`${watch("end_date") ? watch("end_date") : cycle?.end_date}`),
                               "End date"
                             )}
                           </span>
@@ -409,9 +378,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                 <div className="flex w-full flex-col items-start justify-start gap-2">
                   <div className="flex w-full items-start justify-between gap-2">
                     <div className="max-w-[300px]">
-                      <h4 className="text-xl font-semibold text-custom-text-100 break-words w-full">
-                        {cycle.name}
-                      </h4>
+                      <h4 className="text-xl font-semibold text-custom-text-100 break-words w-full">{cycle.name}</h4>
                     </div>
                     <CustomMenu width="lg" ellipsis>
                       {!isCompleted && (
@@ -480,9 +447,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
             <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
-                  <div
-                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
-                  >
+                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-custom-text-200">Progress</span>
@@ -503,11 +468,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationIcon
-                            height={14}
-                            width={14}
-                            className="fill-current text-custom-text-200"
-                          />
+                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
                             {cycleStatus === "upcoming"
                               ? "Cycle is yet to start."
@@ -527,8 +488,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                                 </span>
                                 <span>
                                   Pending Issues -{" "}
-                                  {cycle.total_issues -
-                                    (cycle.completed_issues + cycle.cancelled_issues)}
+                                  {cycle.total_issues - (cycle.completed_issues + cycle.cancelled_issues)}
                                 </span>
                               </div>
 
@@ -564,9 +524,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
             <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
-                  <div
-                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
-                  >
+                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
                     <div className="flex w-full items-center justify-between gap-2">
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-custom-text-200">Other Information</span>
@@ -581,11 +539,7 @@ export const CycleDetailsSidebar: React.FC<Props> = ({
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationIcon
-                            height={14}
-                            width={14}
-                            className="fill-current text-custom-text-200"
-                          />
+                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
                             No issues found. Please add issue.
                           </span>
diff --git a/web/components/cycles/single-cycle-card.tsx b/web/components/cycles/single-cycle-card.tsx
index 0822ba26a..95f065056 100644
--- a/web/components/cycles/single-cycle-card.tsx
+++ b/web/components/cycles/single-cycle-card.tsx
@@ -10,7 +10,8 @@ import useToast from "hooks/use-toast";
 // components
 import { SingleProgressStats } from "components/core";
 // ui
-import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
+import { Tooltip, LinearProgressIndicator } from "@plane/ui";
+import { CustomMenu } from "components/ui";
 import { AssigneesList } from "components/ui/avatar";
 // icons
 import { CalendarDaysIcon } from "@heroicons/react/20/solid";
@@ -22,19 +23,9 @@ import {
   TriangleExclamationIcon,
   AlarmClockIcon,
 } from "components/icons";
-import {
-  ChevronDownIcon,
-  LinkIcon,
-  PencilIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { ChevronDownIcon, LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
 // helpers
-import {
-  getDateRangeStatus,
-  renderShortDateWithYearFormat,
-  findHowManyDaysLeft,
-} from "helpers/date-time.helper";
+import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import { ICycle } from "types";
@@ -93,12 +84,9 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
   const startDate = new Date(cycle.start_date ?? "");
 
   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/${projectId}/cycles/${cycle.id}`
-    ).then(() => {
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -110,10 +98,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
   const progressIndicatorData = stateGroups.map((group, index) => ({
     id: index,
     name: group.title,
-    value:
-      cycle.total_issues > 0
-        ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
-        : 0,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
     color: group.color,
   }));
 
@@ -150,9 +135,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                     />
                   </span>
                   <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
-                    <h3 className="break-words text-lg font-semibold">
-                      {truncateText(cycle.name, 15)}
-                    </h3>
+                    <h3 className="break-words text-lg font-semibold">{truncateText(cycle.name, 15)}</h3>
                   </Tooltip>
                 </span>
                 <span className="flex items-center gap-1 capitalize">
@@ -184,9 +167,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                       <span className="flex gap-1 whitespace-nowrap">
                         {cycle.total_issues - cycle.completed_issues > 0 && (
                           <Tooltip
-                            tooltipContent={`${
-                              cycle.total_issues - cycle.completed_issues
-                            } more pending ${
+                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
                               cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
                             }`}
                           >
@@ -357,10 +338,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                   </Tooltip>
                   <Disclosure.Button>
                     <span className="p-1">
-                      <ChevronDownIcon
-                        className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`}
-                        aria-hidden="true"
-                      />
+                      <ChevronDownIcon className={`h-3 w-3 ${open ? "rotate-180 transform" : ""}`} aria-hidden="true" />
                     </span>
                   </Disclosure.Button>
                 </div>
@@ -370,10 +348,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                       <div className="col-span-2 space-y-3 px-4">
                         <div className="space-y-3 text-xs">
                           {stateGroups.map((group) => (
-                            <div
-                              key={group.key}
-                              className="flex items-center justify-between gap-2"
-                            >
+                            <div key={group.key} className="flex items-center justify-between gap-2">
                               <div className="flex  items-center gap-2">
                                 <span
                                   className="block h-2 w-2 rounded-full"
@@ -390,9 +365,7 @@ export const SingleCycleCard: React.FC<TSingleStatProps> = ({
                                     -{" "}
                                     {cycle.total_issues > 0
                                       ? `${Math.round(
-                                          ((cycle[group.key as keyof ICycle] as number) /
-                                            cycle.total_issues) *
-                                            100
+                                          ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
                                         )}%`
                                       : "0%"}
                                   </span>
diff --git a/web/components/cycles/single-cycle-list.tsx b/web/components/cycles/single-cycle-list.tsx
index a4c21128a..5f0aaca2d 100644
--- a/web/components/cycles/single-cycle-list.tsx
+++ b/web/components/cycles/single-cycle-list.tsx
@@ -6,7 +6,8 @@ import { useRouter } from "next/router";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu, LinearProgressIndicator, Tooltip } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { Tooltip, LinearProgressIndicator } from "@plane/ui";
 // icons
 import { CalendarDaysIcon } from "@heroicons/react/20/solid";
 import {
@@ -19,11 +20,7 @@ import {
 } from "components/icons";
 import { LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
 // helpers
-import {
-  getDateRangeStatus,
-  renderShortDateWithYearFormat,
-  findHowManyDaysLeft,
-} from "helpers/date-time.helper";
+import { getDateRangeStatus, renderShortDateWithYearFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import { ICycle } from "types";
@@ -125,12 +122,9 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
   const startDate = new Date(cycle.start_date ?? "");
 
   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/${projectId}/cycles/${cycle.id}`
-    ).then(() => {
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -142,10 +136,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
   const progressIndicatorData = stateGroups.map((group, index) => ({
     id: index,
     name: group.title,
-    value:
-      cycle.total_issues > 0
-        ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100
-        : 0,
+    value: cycle.total_issues > 0 ? ((cycle[group.key as keyof ICycle] as number) / cycle.total_issues) * 100 : 0,
     color: group.color,
   }));
 
@@ -176,18 +167,10 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                     }`}
                   />
                   <div className="max-w-2xl">
-                    <Tooltip
-                      tooltipContent={cycle.name}
-                      className="break-words"
-                      position="top-left"
-                    >
-                      <h3 className="break-words w-full text-base font-semibold">
-                        {truncateText(cycle.name, 60)}
-                      </h3>
+                    <Tooltip tooltipContent={cycle.name} className="break-words" position="top-left">
+                      <h3 className="break-words w-full text-base font-semibold">{truncateText(cycle.name, 60)}</h3>
                     </Tooltip>
-                    <p className="mt-2 text-custom-text-200 break-words w-full">
-                      {cycle.description}
-                    </p>
+                    <p className="mt-2 text-custom-text-200 break-words w-full">{cycle.description}</p>
                   </div>
                 </div>
                 <div className="flex-shrink-0 flex items-center gap-4">
@@ -219,9 +202,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                       <span className="flex items-center gap-1">
                         {cycle.total_issues - cycle.completed_issues > 0 && (
                           <Tooltip
-                            tooltipContent={`${
-                              cycle.total_issues - cycle.completed_issues
-                            } more pending ${
+                            tooltipContent={`${cycle.total_issues - cycle.completed_issues} more pending ${
                               cycle.total_issues - cycle.completed_issues === 1 ? "issue" : "issues"
                             }`}
                           >
@@ -293,12 +274,8 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         <span className="flex gap-1 whitespace-nowrap">
                           {cycle.total_issues > 0 ? (
                             <>
-                              <RadialProgressBar
-                                progress={(cycle.completed_issues / cycle.total_issues) * 100}
-                              />
-                              <span>
-                                {Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} %
-                              </span>
+                              <RadialProgressBar progress={(cycle.completed_issues / cycle.total_issues) * 100} />
+                              <span>{Math.floor((cycle.completed_issues / cycle.total_issues) * 100)} %</span>
                             </>
                           ) : (
                             <span className="normal-case">No issues present</span>
@@ -315,9 +292,7 @@ export const SingleCycleList: React.FC<TSingleStatProps> = ({
                         </span>
                       ) : (
                         <span className="flex gap-1">
-                          <RadialProgressBar
-                            progress={(cycle.total_issues / cycle.completed_issues) * 100}
-                          />
+                          <RadialProgressBar progress={(cycle.total_issues / cycle.completed_issues) * 100} />
                           {cycleStatus}
                         </span>
                       )}
diff --git a/web/components/cycles/transfer-issues-modal.tsx b/web/components/cycles/transfer-issues-modal.tsx
index e4c26994d..43f9595fc 100644
--- a/web/components/cycles/transfer-issues-modal.tsx
+++ b/web/components/cycles/transfer-issues-modal.tsx
@@ -1,13 +1,9 @@
-import React, { useState, useEffect } from "react";
-
+import React, { useState } from "react";
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
-// component
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import cyclesService from "services/cycles.service";
+import { CycleService } from "services/cycle.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useIssuesView from "hooks/use-issues-view";
@@ -26,6 +22,8 @@ type Props = {
   handleClose: () => void;
 };
 
+const cycleService = new CycleService();
+
 export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) => {
   const [query, setQuery] = useState("");
 
@@ -37,9 +35,9 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
   const { setToastAlert } = useToast();
 
   const transferIssue = async (payload: any) => {
-    await cyclesService
+    await cycleService
       .transferIssues(workspaceSlug as string, projectId as string, cycleId as string, payload)
-      .then((res) => {
+      .then(() => {
         mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
         setToastAlert({
           type: "success",
@@ -47,7 +45,7 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
           message: "Issues have been transferred successfully",
         });
       })
-      .catch((err) => {
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -59,29 +57,23 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
   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 filteredOptions =
     query === ""
       ? incompleteCycles
-      : incompleteCycles?.filter((option) =>
-          option.name.toLowerCase().includes(query.toLowerCase())
-        );
+      : incompleteCycles?.filter((option) => option.name.toLowerCase().includes(query.toLowerCase()));
+
+  // useEffect(() => {
+  //   const handleKeyDown = (e: KeyboardEvent) => {
+  //     if (e.key === "Escape") {
+  //       handleClose();
+  //     }
+  //   };
+  // }, [handleClose]);
 
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        handleClose();
-      }
-    };
-  }, [handleClose]);
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
@@ -153,14 +145,9 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                         ))
                       ) : (
                         <div className="flex w-full items-center justify-center gap-4 p-5 text-sm">
-                          <ExclamationIcon
-                            height={14}
-                            width={14}
-                            className="fill-current text-custom-text-200"
-                          />
+                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
                           <span className="text-center text-custom-text-200">
-                            You don’t have any current cycle. Please create one to transfer the
-                            issues.
+                            You don’t have any current cycle. Please create one to transfer the issues.
                           </span>
                         </div>
                       )
diff --git a/web/components/cycles/transfer-issues.tsx b/web/components/cycles/transfer-issues.tsx
index a49c7665f..8636df6ef 100644
--- a/web/components/cycles/transfer-issues.tsx
+++ b/web/components/cycles/transfer-issues.tsx
@@ -5,11 +5,11 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // component
-import { PrimaryButton, Tooltip } from "components/ui";
+import { Button } from "@plane/ui";
 // icon
 import { ExclamationIcon, TransferIcon } from "components/icons";
 // services
-import cycleServices from "services/cycles.service";
+import { CycleService } from "services/cycle.service";
 // fetch-key
 import { CYCLE_DETAILS } from "constants/fetch-keys";
 
@@ -17,6 +17,8 @@ type Props = {
   handleClick: () => void;
 };
 
+const cycleService = new CycleService();
+
 export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId } = router.query;
@@ -24,12 +26,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
   const { data: cycleDetails } = useSWR(
     cycleId ? CYCLE_DETAILS(cycleId as string) : null,
     workspaceSlug && projectId && cycleId
-      ? () =>
-          cycleServices.getCycleDetails(
-            workspaceSlug as string,
-            projectId as string,
-            cycleId as string
-          )
+      ? () => cycleService.getCycleDetails(workspaceSlug as string, projectId as string, cycleId as string)
       : null
   );
 
@@ -45,10 +42,9 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
 
       {transferableIssuesCount > 0 && (
         <div>
-          <PrimaryButton onClick={handleClick} className="flex items-center gap-3 rounded-lg">
-            <TransferIcon className="h-4 w-4" color="white" />
-            <span className="text-white">Transfer Issues</span>
-          </PrimaryButton>
+          <Button variant="primary" prependIcon={<TransferIcon color="white" />} onClick={handleClick}>
+            Transfer Issues
+          </Button>
         </div>
       )}
     </div>
diff --git a/web/components/emoji-icon-picker/index.tsx b/web/components/emoji-icon-picker/index.tsx
index cc42dbec8..4cfe90d9f 100644
--- a/web/components/emoji-icon-picker/index.tsx
+++ b/web/components/emoji-icon-picker/index.tsx
@@ -26,17 +26,12 @@ const tabOptions = [
   },
 ];
 
-const EmojiIconPicker: React.FC<Props> = ({
-  label,
-  value,
-  onChange,
-  onIconColorChange,
-  disabled = false,
-}) => {
+const EmojiIconPicker: React.FC<Props> = (props) => {
+  const { label, value, onChange, onIconColorChange, disabled = false } = props;
+  // states
   const [isOpen, setIsOpen] = useState(false);
   const [openColorPicker, setOpenColorPicker] = useState(false);
   const [activeColor, setActiveColor] = useState<string>("rgb(var(--color-text-200))");
-
   const [recentEmojis, setRecentEmojis] = useState<string[]>([]);
 
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -145,15 +140,7 @@ const EmojiIconPicker: React.FC<Props> = ({
                   <Tab.Panel className="flex h-full w-full flex-col justify-center">
                     <div className="relative">
                       <div className="flex items-center justify-between px-1 pb-2">
-                        {[
-                          "#FF6B00",
-                          "#8CC1FF",
-                          "#FCBE1D",
-                          "#18904F",
-                          "#ADF672",
-                          "#05C3FF",
-                          "#000000",
-                        ].map((curCol) => (
+                        {["#FF6B00", "#8CC1FF", "#FCBE1D", "#18904F", "#ADF672", "#05C3FF", "#000000"].map((curCol) => (
                           <span
                             key={curCol}
                             className="h-4 w-4 cursor-pointer rounded-full"
@@ -174,9 +161,7 @@ const EmojiIconPicker: React.FC<Props> = ({
                       </div>
                       <div>
                         <TwitterPicker
-                          className={`!absolute top-4 left-4 z-10 m-2 ${
-                            openColorPicker ? "block" : "hidden"
-                          }`}
+                          className={`!absolute top-4 left-4 z-10 m-2 ${openColorPicker ? "block" : "hidden"}`}
                           color={activeColor}
                           onChange={(color) => {
                             setActiveColor(color.hex);
@@ -199,10 +184,7 @@ const EmojiIconPicker: React.FC<Props> = ({
                             setIsOpen(false);
                           }}
                         >
-                          <span
-                            style={{ color: activeColor }}
-                            className="material-symbols-rounded text-lg"
-                          >
+                          <span style={{ color: activeColor }} className="material-symbols-rounded text-lg">
                             {icon.name}
                           </span>
                         </button>
diff --git a/web/components/estimates/create-update-estimate-modal.tsx b/web/components/estimates/create-update-estimate-modal.tsx
index c1dfab86f..46be6d5c9 100644
--- a/web/components/estimates/create-update-estimate-modal.tsx
+++ b/web/components/estimates/create-update-estimate-modal.tsx
@@ -5,19 +5,19 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import estimatesService from "services/estimates.service";
+import { ProjectEstimateService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // helpers
 import { checkDuplicates } from "helpers/array.helper";
 // types
-import { ICurrentUserResponse, IEstimate, IEstimateFormData } from "types";
+import { IUser, IEstimate, IEstimateFormData } from "types";
 // fetch-keys
 import { ESTIMATES_LIST, ESTIMATE_DETAILS } from "constants/fetch-keys";
 
@@ -25,7 +25,7 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data?: IEstimate;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
 type FormValues = {
@@ -50,11 +50,14 @@ const defaultValues: Partial<FormValues> = {
   value6: "",
 };
 
+// services
+const projectEstimateService = new ProjectEstimateService();
+
 export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data, isOpen, user }) => {
   const {
-    register,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
   } = useForm<FormValues>({
     defaultValues,
@@ -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,14 +121,8 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
       false
     );
 
-    await estimatesService
-      .patchEstimate(
-        workspaceSlug as string,
-        projectId as string,
-        data?.id as string,
-        payload,
-        user
-      )
+    await projectEstimateService
+      .patchEstimate(workspaceSlug as string, projectId as string, data?.id as string, payload, user)
       .then(() => {
         mutate(ESTIMATES_LIST(projectId.toString()));
         mutate(ESTIMATE_DETAILS(data.id));
@@ -257,27 +254,41 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                 <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                   <form onSubmit={handleSubmit(onSubmit)}>
                     <div className="space-y-3">
-                      <div className="text-lg font-medium leading-6">
-                        {data ? "Update" : "Create"} Estimate
-                      </div>
+                      <div className="text-lg font-medium leading-6">{data ? "Update" : "Create"} Estimate</div>
                       <div>
-                        <Input
-                          id="name"
+                        <Controller
+                          control={control}
                           name="name"
-                          type="name"
-                          placeholder="Title"
-                          autoComplete="off"
-                          className="resize-none text-xl"
-                          register={register}
+                          render={({ field: { value, onChange, ref } }) => (
+                            <Input
+                              id="name"
+                              name="name"
+                              type="name"
+                              value={value}
+                              onChange={onChange}
+                              ref={ref}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Title"
+                              className="resize-none text-xl w-full"
+                            />
+                          )}
                         />
                       </div>
                       <div>
-                        <TextArea
-                          id="description"
+                        <Controller
                           name="description"
-                          placeholder="Description"
-                          className="h-32 resize-none text-sm"
-                          register={register}
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TextArea
+                              id="description"
+                              name="description"
+                              value={value}
+                              placeholder="Description"
+                              onChange={onChange}
+                              className="mt-3 h-32 resize-none text-sm"
+                              hasError={Boolean(errors?.description)}
+                            />
+                          )}
                         />
                       </div>
                       <div className="grid grid-cols-3 gap-3">
@@ -285,14 +296,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">1</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value1"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 1"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value1"
+                                    name="value1"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value1)}
+                                    placeholder="Point 1"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
@@ -301,14 +320,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">2</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value2"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 2"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value2"
+                                    name="value2"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value2)}
+                                    placeholder="Point 2"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
@@ -317,14 +344,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">3</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value3"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 3"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value3"
+                                    name="value3"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value3)}
+                                    placeholder="Point 3"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
@@ -333,14 +368,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">4</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value4"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 4"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value4"
+                                    name="value4"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value4)}
+                                    placeholder="Point 4"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
@@ -349,14 +392,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">5</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value5"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 5"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value5"
+                                    name="value5"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value5)}
+                                    placeholder="Point 5"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
@@ -365,14 +416,22 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           <span className="flex h-full items-center rounded-lg bg-custom-background-80">
                             <span className="rounded-lg px-2 text-sm text-custom-text-200">6</span>
                             <span className="rounded-r-lg bg-custom-background-100">
-                              <Input
-                                id="name"
+                              <Controller
+                                control={control}
                                 name="value6"
-                                type="name"
-                                className="rounded-l-none"
-                                placeholder="Point 6"
-                                autoComplete="off"
-                                register={register}
+                                render={({ field: { value, onChange, ref } }) => (
+                                  <Input
+                                    id="value6"
+                                    name="value6"
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.value6)}
+                                    placeholder="Point 6"
+                                    className="rounded-l-none w-full"
+                                  />
+                                )}
                               />
                             </span>
                           </span>
@@ -380,8 +439,10 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                       </div>
                     </div>
                     <div className="mt-5 flex justify-end gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="neutral-primary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
                         {data
                           ? isSubmitting
                             ? "Updating Estimate..."
@@ -389,7 +450,7 @@ export const CreateUpdateEstimateModal: React.FC<Props> = ({ handleClose, data,
                           : isSubmitting
                           ? "Creating Estimate..."
                           : "Create Estimate"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </form>
                 </Dialog.Panel>
diff --git a/web/components/estimates/delete-estimate-modal.tsx b/web/components/estimates/delete-estimate-modal.tsx
index b4c08b421..ce5eb9db5 100644
--- a/web/components/estimates/delete-estimate-modal.tsx
+++ b/web/components/estimates/delete-estimate-modal.tsx
@@ -8,7 +8,7 @@ import { IEstimate } from "types";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -17,12 +17,7 @@ type Props = {
   handleDelete: () => void;
 };
 
-export const DeleteEstimateModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  data,
-  handleDelete,
-}) => {
+export const DeleteEstimateModal: React.FC<Props> = ({ isOpen, handleClose, data, handleDelete }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   useEffect(() => {
@@ -64,10 +59,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Estimate</h3>
@@ -76,16 +68,17 @@ export const DeleteEstimateModal: React.FC<Props> = ({
                   <span>
                     <p className="break-words text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete estimate-{" "}
-                      <span className="break-words font-medium text-custom-text-100">
-                        {data.name}
-                      </span>
-                      {""}? All of the data related to the estiamte will be permanently removed.
-                      This action cannot be undone.
+                      <span className="break-words font-medium text-custom-text-100">{data.name}</span>
+                      {""}? All of the data related to the estiamte will be permanently removed. This action cannot be
+                      undone.
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
                       onClick={() => {
                         setIsDeleteLoading(true);
                         handleDelete();
@@ -93,7 +86,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
                       loading={isDeleteLoading}
                     >
                       {isDeleteLoading ? "Deleting..." : "Delete Estimate"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/estimates/single-estimate.tsx b/web/components/estimates/single-estimate.tsx
index 43edfcb2c..dc5c43afe 100644
--- a/web/components/estimates/single-estimate.tsx
+++ b/web/components/estimates/single-estimate.tsx
@@ -3,34 +3,33 @@ import React, { useState } from "react";
 import { useRouter } from "next/router";
 
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 import useProjectDetails from "hooks/use-project-details";
 // components
 import { DeleteEstimateModal } from "components/estimates";
 // ui
-import { CustomMenu, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { CustomMenu } from "components/ui";
 //icons
 import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
-import { ICurrentUserResponse, IEstimate } from "types";
+import { IUser, IEstimate } from "types";
 
 type Props = {
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   estimate: IEstimate;
   editEstimate: (estimate: IEstimate) => void;
   handleEstimateDelete: (estimateId: string) => void;
 };
 
-export const SingleEstimate: React.FC<Props> = ({
-  user,
-  estimate,
-  editEstimate,
-  handleEstimateDelete,
-}) => {
+// services
+const projectService = new ProjectService();
+
+export const SingleEstimate: React.FC<Props> = ({ user, estimate, editEstimate, handleEstimateDelete }) => {
   const [isDeleteEstimateModalOpen, setIsDeleteEstimateModalOpen] = useState(false);
 
   const router = useRouter();
@@ -53,15 +52,13 @@ export const SingleEstimate: React.FC<Props> = ({
       return { ...prevData, estimate: estimate.id };
     }, false);
 
-    await projectService
-      .updateProject(workspaceSlug as string, projectId as string, payload, user)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Estimate points could not be used. Please try again.",
-        });
+    await projectService.updateProject(workspaceSlug as string, projectId as string, payload, user).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Estimate points could not be used. Please try again.",
       });
+    });
   };
 
   return (
@@ -72,9 +69,7 @@ export const SingleEstimate: React.FC<Props> = ({
             <h6 className="flex w-[40vw] items-center gap-2 truncate text-sm font-medium">
               {estimate.name}
               {projectDetails?.estimate && projectDetails?.estimate === estimate.id && (
-                <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">
-                  In use
-                </span>
+                <span className="rounded bg-green-500/20 px-2 py-0.5 text-xs text-green-500">In use</span>
               )}
             </h6>
             <p className="font-sm w-[40vw] truncate text-[14px] font-normal text-custom-text-200">
@@ -83,12 +78,9 @@ export const SingleEstimate: React.FC<Props> = ({
           </div>
           <div className="flex items-center gap-2">
             {projectDetails?.estimate !== estimate.id && estimate.points.length > 0 && (
-              <SecondaryButton
-                onClick={handleUseEstimate}
-                className="!py-1 text-custom-text-200 hover:text-custom-text-100"
-              >
+              <Button variant="neutral-primary" onClick={handleUseEstimate}>
                 Use
-              </SecondaryButton>
+              </Button>
             )}
             <CustomMenu ellipsis>
               <CustomMenu.MenuItem
diff --git a/web/components/exporter/export-modal.tsx b/web/components/exporter/export-modal.tsx
index df4729265..c06692fed 100644
--- a/web/components/exporter/export-modal.tsx
+++ b/web/components/exporter/export-modal.tsx
@@ -1,16 +1,16 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import CSVIntegrationService from "services/integration/csv.services";
+import { ProjectExportService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { SecondaryButton, PrimaryButton, CustomSearchSelect } from "components/ui";
+import { Button } from "@plane/ui";
+import { CustomSearchSelect } from "components/ui";
 // types
-import { ICurrentUserResponse, IImporterService } from "types";
+import { IUser, IImporterService } from "types";
 // fetch-keys
 import useProjects from "hooks/use-projects";
 
@@ -18,18 +18,14 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data: IImporterService | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   provider: string | string[];
   mutateServices: () => void;
 };
 
-export const Exporter: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  user,
-  provider,
-  mutateServices,
-}) => {
+const projectExportService = new ProjectExportService();
+
+export const Exporter: React.FC<Props> = ({ isOpen, handleClose, user, provider, mutateServices }) => {
   const [exportLoading, setExportLoading] = useState(false);
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -60,7 +56,8 @@ export const Exporter: React.FC<Props> = ({
         project: value,
         multiple: multiple,
       };
-      await CSVIntegrationService.exportCSVService(workspaceSlug as string, payload, user)
+      await projectExportService
+        .csvExport(workspaceSlug as string, payload, user)
         .then(() => {
           mutateServices();
           router.push(`/${workspaceSlug}/settings/exports`);
@@ -69,13 +66,7 @@ export const Exporter: React.FC<Props> = ({
             type: "success",
             title: "Export Successful",
             message: `You will be able to download the exported ${
-              provider === "csv"
-                ? "CSV"
-                : provider === "xlsx"
-                ? "Excel"
-                : provider === "json"
-                ? "JSON"
-                : ""
+              provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""
             } from the previous export.`,
           });
         })
@@ -122,13 +113,7 @@ export const Exporter: React.FC<Props> = ({
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">
                         Export to{" "}
-                        {provider === "csv"
-                          ? "CSV"
-                          : provider === "xlsx"
-                          ? "Excel"
-                          : provider === "json"
-                          ? "JSON"
-                          : ""}
+                        {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
                       </h3>
                     </span>
                   </div>
@@ -155,24 +140,21 @@ export const Exporter: React.FC<Props> = ({
                     onClick={() => setMultiple(!multiple)}
                     className="flex items-center gap-2 max-w-min cursor-pointer"
                   >
-                    <input
-                      type="checkbox"
-                      checked={multiple}
-                      onChange={() => setMultiple(!multiple)}
-                    />
-                    <div className="text-sm whitespace-nowrap">
-                      Export the data into separate files
-                    </div>
+                    <input type="checkbox" checked={multiple} onChange={() => setMultiple(!multiple)} />
+                    <div className="text-sm whitespace-nowrap">Export the data into separate files</div>
                   </div>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="primary"
                       onClick={ExportCSVToMail}
                       disabled={exportLoading}
                       loading={exportLoading}
                     >
                       {exportLoading ? "Exporting..." : "Export"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/exporter/guide.tsx b/web/components/exporter/guide.tsx
index 2643a07cf..893197f22 100644
--- a/web/components/exporter/guide.tsx
+++ b/web/components/exporter/guide.tsx
@@ -9,11 +9,12 @@ import useSWR, { mutate } from "swr";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
-import IntegrationService from "services/integration";
+import { IntegrationService } from "services/integrations";
 // components
 import { Exporter, SingleExport } from "components/exporter";
 // ui
-import { Icon, Loader, PrimaryButton } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { Icon } from "components/ui";
 // icons
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 // fetch-keys
@@ -21,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;
@@ -32,11 +36,9 @@ const IntegrationGuide = () => {
   const { user } = useUserAuth();
 
   const { data: exporterServices } = useSWR(
+    workspaceSlug && cursor ? EXPORT_SERVICES_LIST(workspaceSlug as string, cursor, `${per_page}`) : null,
     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
   );
 
@@ -57,28 +59,17 @@ const IntegrationGuide = () => {
                 <div className="flex items-start justify-between gap-4 w-full">
                   <div className="flex item-center gap-2.5">
                     <div className="relative h-10 w-10 flex-shrink-0">
-                      <Image
-                        src={service.logo}
-                        layout="fill"
-                        objectFit="cover"
-                        alt={`${service.title} Logo`}
-                      />
+                      <Image src={service.logo} layout="fill" objectFit="cover" alt={`${service.title} Logo`} />
                     </div>
                     <div>
-                      <h3 className="flex items-center gap-4 text-sm font-medium">
-                        {service.title}
-                      </h3>
-                      <p className="text-sm text-custom-text-200 tracking-tight">
-                        {service.description}
-                      </p>
+                      <h3 className="flex items-center gap-4 text-sm font-medium">{service.title}</h3>
+                      <p className="text-sm text-custom-text-200 tracking-tight">{service.description}</p>
                     </div>
                   </div>
                   <div className="flex-shrink-0">
                     <Link href={`/${workspaceSlug}/settings/exports?provider=${service.provider}`}>
                       <a>
-                        <PrimaryButton>
-                          <span className="capitalize">{service.type}</span>
-                        </PrimaryButton>
+                        <Button variant="primary">{service.type}</Button>
                       </a>
                     </Link>
                   </div>
@@ -96,9 +87,9 @@ const IntegrationGuide = () => {
                   className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs outline-none"
                   onClick={() => {
                     setRefreshing(true);
-                    mutate(
-                      EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`)
-                    ).then(() => setRefreshing(false));
+                    mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`)).then(() =>
+                      setRefreshing(false)
+                    );
                   }}
                 >
                   <ArrowPathIcon className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
@@ -108,9 +99,7 @@ const IntegrationGuide = () => {
               <div className="flex gap-2 items-center text-xs">
                 <button
                   disabled={!exporterServices?.prev_page_results}
-                  onClick={() =>
-                    exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)
-                  }
+                  onClick={() => exporterServices?.prev_page_results && setCursor(exporterServices?.prev_cursor)}
                   className={`flex items-center border border-custom-primary-100 text-custom-primary-100 px-1 rounded ${
                     exporterServices?.prev_page_results
                       ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
@@ -122,9 +111,7 @@ const IntegrationGuide = () => {
                 </button>
                 <button
                   disabled={!exporterServices?.next_page_results}
-                  onClick={() =>
-                    exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)
-                  }
+                  onClick={() => exporterServices?.next_page_results && setCursor(exporterServices?.next_cursor)}
                   className={`flex items-center border border-custom-primary-100 text-custom-primary-100 px-1 rounded ${
                     exporterServices?.next_page_results
                       ? "cursor-pointer hover:bg-custom-primary-100 hover:text-white"
@@ -147,9 +134,7 @@ const IntegrationGuide = () => {
                     </div>
                   </div>
                 ) : (
-                  <p className="text-sm text-custom-text-200 px-4 py-6">
-                    No previous export available.
-                  </p>
+                  <p className="text-sm text-custom-text-200 px-4 py-6">No previous export available.</p>
                 )
               ) : (
                 <Loader className="mt-6 grid grid-cols-1 gap-3">
@@ -169,9 +154,7 @@ const IntegrationGuide = () => {
             data={null}
             user={user}
             provider={provider}
-            mutateServices={() =>
-              mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`))
-            }
+            mutateServices={() => mutate(EXPORT_SERVICES_LIST(workspaceSlug as string, `${cursor}`, `${per_page}`))}
           />
         )}
       </div>
diff --git a/web/components/exporter/single-export.tsx b/web/components/exporter/single-export.tsx
index 772119f25..d8e05ac26 100644
--- a/web/components/exporter/single-export.tsx
+++ b/web/components/exporter/single-export.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import { useState, FC } from "react";
 // ui
-import { PrimaryButton } from "components/ui"; // icons
+import { Button } from "@plane/ui";
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
@@ -11,9 +11,10 @@ type Props = {
   refreshing: boolean;
 };
 
-export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
+export const SingleExport: FC<Props> = ({ service, refreshing }) => {
   const provider = service.provider;
-  const [isLoading, setIsLoading] = React.useState(false);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [isLoading, setIsLoading] = useState(false);
 
   const checkExpiry = (inputDateString: string) => {
     const currentDate = new Date();
@@ -29,13 +30,7 @@ export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
           <span>
             Export to{" "}
             <span className="font-medium">
-              {provider === "csv"
-                ? "CSV"
-                : provider === "xlsx"
-                ? "Excel"
-                : provider === "json"
-                ? "JSON"
-                : ""}
+              {provider === "csv" ? "CSV" : provider === "xlsx" ? "Excel" : provider === "json" ? "JSON" : ""}
             </span>{" "}
           </span>
           <span
@@ -64,9 +59,9 @@ export const SingleExport: React.FC<Props> = ({ service, refreshing }) => {
           {service.status == "completed" && (
             <div>
               <a target="_blank" href={service?.url} rel="noopener noreferrer">
-                <PrimaryButton className="w-full text-center">
+                <Button variant="primary" className="w-full">
                   {isLoading ? "Downloading..." : "Download"}
-                </PrimaryButton>
+                </Button>
               </a>
             </div>
           )}
diff --git a/web/components/gantt-chart/chart/bi-week.tsx b/web/components/gantt-chart/chart/bi-week.tsx
index 3637f88ea..f70f34ec3 100644
--- a/web/components/gantt-chart/chart/bi-week.tsx
+++ b/web/components/gantt-chart/chart/bi-week.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const BiWeekChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -36,14 +37,10 @@ export const BiWeekChartView: FC<any> = () => {
                       </div>
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
-                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-custom-background-80`
-                            : ``
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-custom-background-80` : ``
                         }`}
                       >
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/web/components/gantt-chart/chart/day.tsx b/web/components/gantt-chart/chart/day.tsx
index cfc7cad2f..f9edd895b 100644
--- a/web/components/gantt-chart/chart/day.tsx
+++ b/web/components/gantt-chart/chart/day.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const DayChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -36,14 +37,10 @@ export const DayChartView: FC<any> = () => {
                       </div>
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
-                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-gray-100`
-                            : ``
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-gray-100` : ``
                         }`}
                       >
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/web/components/gantt-chart/chart/hours.tsx b/web/components/gantt-chart/chart/hours.tsx
index 32f73342d..afd8b1ddf 100644
--- a/web/components/gantt-chart/chart/hours.tsx
+++ b/web/components/gantt-chart/chart/hours.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const HourChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -36,14 +37,10 @@ export const HourChartView: FC<any> = () => {
                       </div>
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
-                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-gray-100`
-                            : ``
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-gray-100` : ``
                         }`}
                       >
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/web/components/gantt-chart/chart/index.tsx b/web/components/gantt-chart/chart/index.tsx
index e21e803de..184187674 100644
--- a/web/components/gantt-chart/chart/index.tsx
+++ b/web/components/gantt-chart/chart/index.tsx
@@ -19,17 +19,17 @@ import { PlusIcon } from "lucide-react";
 import {
   // generateHourChart,
   // generateDayChart,
-  generateWeekChart,
-  generateBiWeekChart,
+  // generateWeekChart,
+  // generateBiWeekChart,
   generateMonthChart,
-  generateQuarterChart,
-  generateYearChart,
+  // generateQuarterChart,
+  // generateYearChart,
   getNumberOfDaysBetweenTwoDatesInMonth,
-  getNumberOfDaysBetweenTwoDatesInQuarter,
-  getNumberOfDaysBetweenTwoDatesInYear,
+  // getNumberOfDaysBetweenTwoDatesInQuarter,
+  // getNumberOfDaysBetweenTwoDatesInYear,
   getMonthChartItemPositionWidthInMonth,
 } from "../views";
-import { GanttInlineCreateIssueForm } from "components/core/views/gantt-chart-view/inline-create-issue-form";
+// import { GanttInlineCreateIssueForm } from "components/core/views/gantt-chart-view/inline-create-issue-form";
 // types
 import { ChartDataType, IBlockUpdateData, IGanttBlock, TGanttViews } from "../types";
 // data
@@ -66,22 +66,18 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   enableReorder,
   bottomSpacing,
 }) => {
-  const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
-  const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
-
-  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
-
-  // blocks state management starts
-  const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null);
-
-  const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } =
-    useChart();
-
+  // router
   const router = useRouter();
   const { cycleId, moduleId } = router.query;
-
   const isCyclePage = router.pathname.split("/")[4] === "cycles" && !cycleId;
   const isModulePage = router.pathname.split("/")[4] === "modules" && !moduleId;
+  // states
+  const [itemsContainerWidth, setItemsContainerWidth] = useState<number>(0);
+  const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
+  const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
+  const [chartBlocks, setChartBlocks] = useState<IGanttBlock[] | null>(null); // blocks state management starts
+  // hooks
+  const { currentView, currentViewData, renderView, dispatch, allViews, updateScrollLeft } = useChart();
 
   const renderBlockStructure = (view: any, blocks: IGanttBlock[] | null) =>
     blocks && blocks.length > 0
@@ -92,8 +88,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
       : [];
 
   useEffect(() => {
-    if (currentViewData && blocks)
-      setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
+    if (currentViewData && blocks) setChartBlocks(() => renderBlockStructure(currentViewData, blocks));
   }, [currentViewData, blocks]);
 
   // blocks state management ends
@@ -115,8 +110,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     // if (view === "day") currentRender = generateDayChart(selectedCurrentViewData, side);
     // if (view === "week") currentRender = generateWeekChart(selectedCurrentViewData, side);
     // if (view === "bi_week") currentRender = generateBiWeekChart(selectedCurrentViewData, side);
-    if (selectedCurrentView === "month")
-      currentRender = generateMonthChart(selectedCurrentViewData, side);
+    if (selectedCurrentView === "month") currentRender = generateMonthChart(selectedCurrentViewData, side);
     // if (view === "quarter") currentRender = generateQuarterChart(selectedCurrentViewData, side);
     // if (selectedCurrentView === "year")
     //   currentRender = generateYearChart(selectedCurrentViewData, side);
@@ -155,10 +149,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
         });
         setItemsContainerWidth(currentRender.scrollWidth);
         setTimeout(() => {
-          handleScrollToCurrentSelectedDate(
-            currentRender.state,
-            currentRender.state.data.currentDate
-          );
+          handleScrollToCurrentSelectedDate(currentRender.state, currentRender.state.data.currentDate);
         }, 50);
       }
     }
@@ -169,6 +160,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
   // handling the scroll positioning from left and right
   useEffect(() => {
     handleToday();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const updatingCurrentLeftScrollPosition = (width: number) => {
@@ -202,8 +194,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
     // if (currentView === "year")
     //   daysDifference = getNumberOfDaysBetweenTwoDatesInYear(currentState.data.startDate, date);
 
-    scrollWidth =
-      daysDifference * currentState.data.width - (clientVisibleWidth / 2 - currentState.data.width);
+    scrollWidth = daysDifference * currentState.data.width - (clientVisibleWidth / 2 - currentState.data.width);
 
     scrollContainer.scrollLeft = scrollWidth;
   };
@@ -218,22 +209,17 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
 
     updateScrollLeft(currentScrollPosition);
 
-    const approxRangeLeft: number =
-      scrollWidth >= clientVisibleWidth + 1000 ? 1000 : scrollWidth - clientVisibleWidth;
+    const approxRangeLeft: number = scrollWidth >= clientVisibleWidth + 1000 ? 1000 : scrollWidth - clientVisibleWidth;
     const approxRangeRight: number = scrollWidth - (approxRangeLeft + clientVisibleWidth);
 
-    if (currentScrollPosition >= approxRangeRight)
-      updateCurrentViewRenderPayload("right", currentView);
-    if (currentScrollPosition <= approxRangeLeft)
-      updateCurrentViewRenderPayload("left", currentView);
+    if (currentScrollPosition >= approxRangeRight) updateCurrentViewRenderPayload("right", currentView);
+    if (currentScrollPosition <= approxRangeLeft) updateCurrentViewRenderPayload("left", currentView);
   };
 
   return (
     <div
       className={`${
-        fullScreenMode
-          ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-custom-background-100`
-          : `relative`
+        fullScreenMode ? `fixed top-0 bottom-0 left-0 right-0 z-[999999] bg-custom-background-100` : `relative`
       } ${
         border ? `border border-custom-border-200` : ``
       } flex h-full flex-col rounded-sm select-none bg-custom-background-100 shadow`}
@@ -262,13 +248,12 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
         <div className="flex flex-wrap items-center gap-2">
           {allViews &&
             allViews.length > 0 &&
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             allViews.map((_chatView: any, _idx: any) => (
               <div
                 key={_chatView?.key}
                 className={`cursor-pointer rounded-sm p-1 px-2 text-xs ${
-                  currentView === _chatView?.key
-                    ? `bg-custom-background-80`
-                    : `hover:bg-custom-background-90`
+                  currentView === _chatView?.key ? `bg-custom-background-80` : `hover:bg-custom-background-90`
                 }`}
                 onClick={() => handleChartView(_chatView?.key)}
               >
@@ -305,10 +290,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           bottomSpacing ? "mb-8" : ""
         }`}
       >
-        <div
-          id="gantt-sidebar"
-          className="h-full w-1/4 flex flex-col border-r border-custom-border-200"
-        >
+        <div id="gantt-sidebar" className="h-full w-1/4 flex flex-col border-r border-custom-border-200">
           <div className="h-[60px] border-b border-custom-border-200 box-border flex-shrink-0 flex items-end justify-between gap-2 text-sm text-custom-text-300 font-medium pb-2 pl-10 pr-4">
             <h6>{title}</h6>
             <h6>Duration</h6>
@@ -322,7 +304,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
           />
           {chartBlocks && !(isCyclePage || isModulePage) && (
             <div className="pl-2.5 py-3">
-              <GanttInlineCreateIssueForm
+              {/* <GanttInlineCreateIssueForm
                 isOpen={isCreateIssueFormOpen}
                 handleClose={() => setIsCreateIssueFormOpen(false)}
                 onSuccess={() => {
@@ -344,7 +326,7 @@ export const ChartViewRoot: FC<ChartViewRootProps> = ({
                   ...(cycleId && { cycle: cycleId.toString() }),
                   ...(moduleId && { module: moduleId.toString() }),
                 }}
-              />
+              /> */}
 
               {!isCreateIssueFormOpen && (
                 <button
diff --git a/web/components/gantt-chart/chart/quarter.tsx b/web/components/gantt-chart/chart/quarter.tsx
index abe56c83e..63d229831 100644
--- a/web/components/gantt-chart/chart/quarter.tsx
+++ b/web/components/gantt-chart/chart/quarter.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const QuarterChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -35,9 +36,7 @@ export const QuarterChartView: FC<any> = () => {
                         <div>{_item.title}</div>
                       </div>
                       <div className={`relative h-full w-full flex-1 flex justify-center`}>
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/web/components/gantt-chart/chart/week.tsx b/web/components/gantt-chart/chart/week.tsx
index 91466a3ac..e231b7460 100644
--- a/web/components/gantt-chart/chart/week.tsx
+++ b/web/components/gantt-chart/chart/week.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const WeekChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -36,14 +37,10 @@ export const WeekChartView: FC<any> = () => {
                       </div>
                       <div
                         className={`relative h-full w-full flex-1 flex justify-center ${
-                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "")
-                            ? `bg-custom-background-80`
-                            : ``
+                          ["sat", "sun"].includes(_item?.dayData?.shortTitle || "") ? `bg-custom-background-80` : ``
                         }`}
                       >
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/web/components/gantt-chart/chart/year.tsx b/web/components/gantt-chart/chart/year.tsx
index a3f72b9dc..a8b3b57a5 100644
--- a/web/components/gantt-chart/chart/year.tsx
+++ b/web/components/gantt-chart/chart/year.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import { useChart } from "../hooks";
 
 export const YearChartView: FC<any> = () => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { currentView, currentViewData, renderView, dispatch, allViews } = useChart();
 
   return (
@@ -35,9 +36,7 @@ export const YearChartView: FC<any> = () => {
                         <div>{_item.title}</div>
                       </div>
                       <div className={`relative h-full w-full flex-1 flex justify-center`}>
-                        {_item?.today && (
-                          <div className="absolute top-0 bottom-0 border border-red-500"> </div>
-                        )}
+                        {_item?.today && <div className="absolute top-0 bottom-0 border border-red-500"> </div>}
                       </div>
                     </div>
                   ))}
diff --git a/web/components/gantt-chart/contexts/index.tsx b/web/components/gantt-chart/contexts/index.tsx
index 05dfbe678..137cc2607 100644
--- a/web/components/gantt-chart/contexts/index.tsx
+++ b/web/components/gantt-chart/contexts/index.tsx
@@ -6,10 +6,7 @@ import { allViewsWithData, currentViewDataWithView } from "../data";
 
 export const ChartContext = createContext<ChartContextReducer | undefined>(undefined);
 
-const chartReducer = (
-  state: ChartContextData,
-  action: ChartContextActionPayload
-): ChartContextData => {
+const chartReducer = (state: ChartContextData, action: ChartContextActionPayload): ChartContextData => {
   switch (action.type) {
     case "CURRENT_VIEW":
       return { ...state, currentView: action.payload };
@@ -50,9 +47,7 @@ export const ChartContextProvider: React.FC<{ children: React.ReactNode }> = ({
   };
 
   return (
-    <ChartContext.Provider
-      value={{ ...state, scrollLeft, updateScrollLeft, dispatch: handleDispatch }}
-    >
+    <ChartContext.Provider value={{ ...state, scrollLeft, updateScrollLeft, dispatch: handleDispatch }}>
       {children}
     </ChartContext.Provider>
   );
diff --git a/web/components/gantt-chart/hooks/block-update.tsx b/web/components/gantt-chart/hooks/block-update.tsx
deleted file mode 100644
index 68e1f6d12..000000000
--- a/web/components/gantt-chart/hooks/block-update.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { KeyedMutator } from "swr";
-
-// services
-import issuesService from "services/issues.service";
-// types
-import { ICurrentUserResponse, IIssue } from "types";
-import { IBlockUpdateData } from "../types";
-
-export const updateGanttIssue = (
-  issue: IIssue,
-  payload: IBlockUpdateData,
-  mutate: KeyedMutator<any>,
-  user: ICurrentUserResponse | undefined,
-  workspaceSlug: string | undefined
-) => {
-  if (!issue || !workspaceSlug || !user) return;
-
-  mutate((prevData: any) => {
-    if (!prevData) return prevData;
-
-    const newList = prevData.map((p: any) => ({
-      ...p,
-      ...(p.id === issue.id ? payload : {}),
-    }));
-
-    if (payload.sort_order) {
-      const removedElement = newList.splice(payload.sort_order.sourceIndex, 1)[0];
-      removedElement.sort_order = payload.sort_order.newSortOrder;
-      newList.splice(payload.sort_order.destinationIndex, 0, removedElement);
-    }
-
-    return newList;
-  }, false);
-
-  const newPayload: any = { ...payload };
-
-  if (newPayload.sort_order && payload.sort_order)
-    newPayload.sort_order = payload.sort_order.newSortOrder;
-
-  issuesService.patchIssue(workspaceSlug, issue.project, issue.id, newPayload, user);
-};
diff --git a/web/components/gantt-chart/sidebar.tsx b/web/components/gantt-chart/sidebar.tsx
index 2aec274d9..7924467b0 100644
--- a/web/components/gantt-chart/sidebar.tsx
+++ b/web/components/gantt-chart/sidebar.tsx
@@ -5,7 +5,7 @@ import StrictModeDroppable from "components/dnd/StrictModeDroppable";
 // hooks
 import { useChart } from "./hooks";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { EllipsisVerticalIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -22,6 +22,7 @@ type Props = {
 };
 
 export const GanttSidebar: React.FC<Props> = (props) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { title, blockUpdateHandler, blocks, SidebarBlockRender, enableReorder } = props;
 
   const router = useRouter();
@@ -55,8 +56,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
     // update the sort order to the lowest if dropped at the top
     if (destination.index === 0) updatedSortOrder = blocks[0].sort_order - 1000;
     // update the sort order to the highest if dropped at the bottom
-    else if (destination.index === blocks.length - 1)
-      updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
+    else if (destination.index === blocks.length - 1) updatedSortOrder = blocks[blocks.length - 1].sort_order + 1000;
     // update the sort order to the average of the two adjacent blocks if dropped in between
     else {
       const destinationSortingOrder = blocks[destination.index].sort_order;
@@ -95,11 +95,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
             <>
               {blocks ? (
                 blocks.map((block, index) => {
-                  const duration = findTotalDaysInRange(
-                    block.start_date ?? "",
-                    block.target_date ?? "",
-                    true
-                  );
+                  const duration = findTotalDaysInRange(block.start_date ?? "", block.target_date ?? "", true);
 
                   return (
                     <Draggable
@@ -110,9 +106,7 @@ export const GanttSidebar: React.FC<Props> = (props) => {
                     >
                       {(provided, snapshot) => (
                         <div
-                          className={`h-11 ${
-                            snapshot.isDragging ? "bg-custom-background-80 rounded" : ""
-                          }`}
+                          className={`h-11 ${snapshot.isDragging ? "bg-custom-background-80 rounded" : ""}`}
                           onMouseEnter={() => updateActiveBlock(block)}
                           onMouseLeave={() => updateActiveBlock(null)}
                           ref={provided.innerRef}
diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
new file mode 100644
index 000000000..c6d512d22
--- /dev/null
+++ b/web/components/headers/cycle-issues.tsx
@@ -0,0 +1,147 @@
+import { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
+import { ProjectAnalyticsModal } from "components/analytics";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { Plus } from "lucide-react";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+export const CycleIssuesHeader: React.FC = observer(() => {
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    cycle: cycleStore,
+    cycleIssueFilter: cycleIssueFilterStore,
+    project: projectStore,
+  } = useMobxStore();
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          layout,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId || !cycleId) return;
+
+      const newValues = cycleIssueFilterStore.cycleFilters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (cycleIssueFilterStore.cycleFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      cycleIssueFilterStore.updateCycleFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), {
+        [key]: newValues,
+      });
+    },
+    [cycleId, cycleIssueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const cycleDetails = cycleId ? cycleStore.getCycleById(cycleId.toString()) : undefined;
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        cycleDetails={cycleDetails ?? undefined}
+      />
+      <div className="flex items-center gap-2">
+        <LayoutSelection
+          layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+          onChange={(layout) => handleLayoutChange(layout)}
+          selectedLayout={activeLayout}
+        />
+        <FiltersDropdown title="Filters">
+          <FilterSelection
+            filters={cycleIssueFilterStore.cycleFilters}
+            handleFiltersUpdate={handleFiltersUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+            labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+            members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+            states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+          />
+        </FiltersDropdown>
+        <FiltersDropdown title="View">
+          <DisplayFiltersSelection
+            displayFilters={issueFilterStore.userDisplayFilters}
+            displayProperties={issueFilterStore.userDisplayProperties}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+            handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+          />
+        </FiltersDropdown>
+        <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+          Analytics
+        </Button>
+        <Button
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", {
+              key: "c",
+            });
+            document.dispatchEvent(e);
+          }}
+          size="sm"
+          prependIcon={<Plus />}
+        >
+          Add Issue
+        </Button>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
new file mode 100644
index 000000000..95ba2a182
--- /dev/null
+++ b/web/components/headers/global-issues.tsx
@@ -0,0 +1,160 @@
+import { useCallback, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "components/issues";
+import { CreateUpdateWorkspaceViewModal } from "components/workspace";
+// ui
+import { Button, Tooltip } from "@plane/ui";
+// icons
+import { CheckCircle, List, PlusIcon, Sheet } from "lucide-react";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TStaticViewTypes } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+const GLOBAL_VIEW_LAYOUTS = [
+  { key: "list", title: "List", link: "/workspace-views", icon: List },
+  { key: "spreadsheet", title: "Spreadsheet", link: "/workspace-views/all-issues", icon: Sheet },
+];
+
+type Props = {
+  activeLayout: "list" | "spreadsheet";
+};
+
+const STATIC_VIEW_TYPES: TStaticViewTypes[] = ["all-issues", "assigned", "created", "subscribed"];
+
+export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
+  const { activeLayout } = props;
+
+  const [createViewModal, setCreateViewModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const {
+    globalViewFilters: globalViewFiltersStore,
+    workspaceFilter: workspaceFilterStore,
+    workspace: workspaceStore,
+    project: projectStore,
+  } = useMobxStore();
+
+  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !globalViewId) return;
+
+      const newValues = storedFilters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (storedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+        [key]: newValues,
+      });
+    },
+    [globalViewId, globalViewFiltersStore, storedFilters, workspaceSlug]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug) return;
+
+      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
+        display_filters: updatedDisplayFilter,
+      });
+    },
+    [workspaceFilterStore, workspaceSlug]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug) return;
+
+      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
+        display_properties: property,
+      });
+    },
+    [workspaceFilterStore, workspaceSlug]
+  );
+
+  useSWR(
+    workspaceSlug ? "USER_WORKSPACE_DISPLAY_FILTERS" : null,
+    workspaceSlug ? () => workspaceFilterStore.fetchUserWorkspaceFilters(workspaceSlug.toString()) : null
+  );
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
+      <div className="relative w-full flex items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div className="flex gap-2 items-center">
+          {activeLayout === "spreadsheet" && <CheckCircle size={16} strokeWidth={2} />}
+          <span className="text-sm font-medium">Workspace {activeLayout === "spreadsheet" ? "Issues" : "Views"}</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
+            {GLOBAL_VIEW_LAYOUTS.map((layout) => (
+              <Link key={layout.key} href={`/${workspaceSlug}/${layout.link}`}>
+                <a>
+                  <Tooltip tooltipContent={layout.title}>
+                    <div
+                      className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
+                        activeLayout === layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+                      }`}
+                    >
+                      <layout.icon
+                        size={14}
+                        strokeWidth={2}
+                        className={`${activeLayout === layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
+                      />
+                    </div>
+                  </Tooltip>
+                </a>
+              </Link>
+            ))}
+          </div>
+          {activeLayout === "spreadsheet" && (
+            <>
+              {!STATIC_VIEW_TYPES.some((word) => router.pathname.includes(word)) && (
+                <FiltersDropdown title="Filters">
+                  <FilterSelection
+                    filters={storedFilters ?? {}}
+                    handleFiltersUpdate={handleFiltersUpdate}
+                    layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                    labels={workspaceStore.workspaceLabels ?? undefined}
+                    projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
+                  />
+                </FiltersDropdown>
+              )}
+
+              <FiltersDropdown title="View">
+                <DisplayFiltersSelection
+                  displayFilters={workspaceFilterStore.workspaceDisplayFilters}
+                  displayProperties={workspaceFilterStore.workspaceDisplayProperties}
+                  handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+                  handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+                  layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                />
+              </FiltersDropdown>
+            </>
+          )}
+          <Button variant="primary" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
+            New View
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/index.ts b/web/components/headers/index.ts
new file mode 100644
index 000000000..89eb35766
--- /dev/null
+++ b/web/components/headers/index.ts
@@ -0,0 +1,9 @@
+export * from "./cycle-issues";
+export * from "./global-issues";
+export * from "./module-issues";
+export * from "./project-issues";
+export * from "./project-view-issues";
+export * from "./project-views";
+export * from "./workspace-analytics";
+export * from "./workspace-dashboard";
+export * from "./projects";
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
new file mode 100644
index 000000000..d0ac26cce
--- /dev/null
+++ b/web/components/headers/module-issues.tsx
@@ -0,0 +1,147 @@
+import { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
+import { ProjectAnalyticsModal } from "components/analytics";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { Plus } from "lucide-react";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+export const ModuleIssuesHeader: React.FC = observer(() => {
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    module: moduleStore,
+    moduleFilter: moduleFilterStore,
+    project: projectStore,
+  } = useMobxStore();
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          layout,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId || !moduleId) return;
+
+      const newValues = moduleFilterStore.moduleFilters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (moduleFilterStore.moduleFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
+        [key]: newValues,
+      });
+    },
+    [moduleId, moduleFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const moduleDetails = moduleId ? moduleStore.getModuleById(moduleId.toString()) : undefined;
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        moduleDetails={moduleDetails ?? undefined}
+      />
+      <div className="flex items-center gap-2">
+        <LayoutSelection
+          layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+          onChange={(layout) => handleLayoutChange(layout)}
+          selectedLayout={activeLayout}
+        />
+        <FiltersDropdown title="Filters">
+          <FilterSelection
+            filters={moduleFilterStore.moduleFilters}
+            handleFiltersUpdate={handleFiltersUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+            labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+            members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+            states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+          />
+        </FiltersDropdown>
+        <FiltersDropdown title="View">
+          <DisplayFiltersSelection
+            displayFilters={issueFilterStore.userDisplayFilters}
+            displayProperties={issueFilterStore.userDisplayProperties}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+            handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+          />
+        </FiltersDropdown>
+        <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+          Analytics
+        </Button>
+        <Button
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", {
+              key: "c",
+            });
+            document.dispatchEvent(e);
+          }}
+          size="sm"
+          prependIcon={<Plus />}
+        >
+          Add Issue
+        </Button>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
new file mode 100644
index 000000000..ea6004fe3
--- /dev/null
+++ b/web/components/headers/project-issues.tsx
@@ -0,0 +1,164 @@
+import { useCallback, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
+import { ProjectAnalyticsModal } from "components/analytics";
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { Plus } from "lucide-react";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+export const ProjectIssuesHeader: React.FC = observer(() => {
+  const [analyticsModal, setAnalyticsModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          layout,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !projectId) return;
+
+      const newValues = issueFilterStore.userFilters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (issueFilterStore.userFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        filters: {
+          [key]: newValues,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const projectDetails =
+    workspaceSlug && projectId
+      ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
+      : undefined;
+
+  return (
+    <>
+      <ProjectAnalyticsModal
+        isOpen={analyticsModal}
+        onClose={() => setAnalyticsModal(false)}
+        projectDetails={projectDetails ?? undefined}
+      />
+      <div className="flex items-center gap-2">
+        <LayoutSelection
+          layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+          onChange={(layout) => handleLayoutChange(layout)}
+          selectedLayout={activeLayout}
+        />
+        <FiltersDropdown title="Filters">
+          <FilterSelection
+            filters={issueFilterStore.userFilters}
+            handleFiltersUpdate={handleFiltersUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+            labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+            members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+            states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+          />
+        </FiltersDropdown>
+        <FiltersDropdown title="View">
+          <DisplayFiltersSelection
+            displayFilters={issueFilterStore.userDisplayFilters}
+            displayProperties={issueFilterStore.userDisplayProperties}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+            handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+            layoutDisplayFiltersOptions={
+              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
+            }
+          />
+        </FiltersDropdown>
+        {/* TODO: add inbox redirection here */}
+        {projectDetails?.inbox_view && (
+          // <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`}>
+          <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/inboxId`}>
+            <a>
+              <Button variant="neutral-primary" size="sm">
+                <span>Inbox</span>
+                {/* {inboxList && inboxList?.[0]?.pending_issue_count !== 0 && (
+                  <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
+                    {inboxList?.[0]?.pending_issue_count}
+                  </span>
+                )} */}
+              </Button>
+            </a>
+          </Link>
+        )}
+        <Button onClick={() => setAnalyticsModal(true)} variant="neutral-primary" size="sm">
+          Analytics
+        </Button>
+        <Button
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", {
+              key: "c",
+            });
+            document.dispatchEvent(e);
+          }}
+          size="sm"
+          prependIcon={<Plus />}
+        >
+          Add Issue
+        </Button>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
new file mode 100644
index 000000000..0b7134dfd
--- /dev/null
+++ b/web/components/headers/project-view-issues.tsx
@@ -0,0 +1,113 @@
+import { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+export const ProjectViewIssuesHeader: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const {
+    issueFilter: issueFilterStore,
+    projectViewFilters: projectViewFiltersStore,
+    project: projectStore,
+  } = useMobxStore();
+
+  const storedFilters = viewId ? projectViewFiltersStore.storedFilters[viewId.toString()] : undefined;
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  const handleLayoutChange = useCallback(
+    (layout: TIssueLayouts) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          layout,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleFiltersUpdate = useCallback(
+    (key: keyof IIssueFilterOptions, value: string | string[]) => {
+      if (!workspaceSlug || !viewId) return;
+
+      const newValues = storedFilters?.[key] ?? [];
+
+      if (Array.isArray(value)) {
+        value.forEach((val) => {
+          if (!newValues.includes(val)) newValues.push(val);
+        });
+      } else {
+        if (storedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+        else newValues.push(value);
+      }
+
+      projectViewFiltersStore.updateStoredFilters(viewId.toString(), {
+        [key]: newValues,
+      });
+    },
+    [projectViewFiltersStore, storedFilters, viewId, workspaceSlug]
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const handleDisplayPropertiesUpdate = useCallback(
+    (property: Partial<IIssueDisplayProperties>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateDisplayProperties(workspaceSlug.toString(), projectId.toString(), property);
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  return (
+    <div className="flex items-center gap-2">
+      <LayoutSelection
+        layouts={["list", "kanban", "calendar", "spreadsheet", "gantt_chart"]}
+        onChange={(layout) => handleLayoutChange(layout)}
+        selectedLayout={activeLayout}
+      />
+      <FiltersDropdown title="Filters">
+        <FilterSelection
+          filters={storedFilters ?? {}}
+          handleFiltersUpdate={handleFiltersUpdate}
+          layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
+          labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+          members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+          states={projectStore.states?.[projectId?.toString() ?? ""] ?? undefined}
+        />
+      </FiltersDropdown>
+      <FiltersDropdown title="View">
+        <DisplayFiltersSelection
+          displayFilters={issueFilterStore.userDisplayFilters}
+          displayProperties={issueFilterStore.userDisplayProperties}
+          handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+          handleDisplayPropertiesUpdate={handleDisplayPropertiesUpdate}
+          layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
+        />
+      </FiltersDropdown>
+    </div>
+  );
+});
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
new file mode 100644
index 000000000..45f47e551
--- /dev/null
+++ b/web/components/headers/project-views.tsx
@@ -0,0 +1,31 @@
+import { useState } from "react";
+
+// components
+import { CreateUpdateProjectViewModal } from "components/views";
+// ui
+import { PrimaryButton } from "components/ui";
+// icons
+import { PlusIcon } from "lucide-react";
+
+export const ProjectViewsHeader = () => {
+  const [createViewModal, setCreateViewModal] = useState(false);
+
+  return (
+    <>
+      <CreateUpdateProjectViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
+      <div>
+        <PrimaryButton
+          type="button"
+          className="flex items-center gap-2"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "v" });
+            document.dispatchEvent(e);
+          }}
+        >
+          <PlusIcon size={14} strokeWidth={2} />
+          Create View
+        </PrimaryButton>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
new file mode 100644
index 000000000..9cb4c35f3
--- /dev/null
+++ b/web/components/headers/projects.tsx
@@ -0,0 +1,65 @@
+import { useRouter } from "next/router";
+import { ArrowLeft, Search, Plus } from "lucide-react";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { Button } from "@plane/ui";
+// helper
+import { truncateText } from "helpers/string.helper";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
+
+export const ProjectsHeader = observer(() => {
+  const router = useRouter();
+  // store
+  const { project: projectStore, workspace: workspaceStore } = useMobxStore();
+  const currentWorkspace = workspaceStore.currentWorkspace;
+
+  return (
+    <div
+      className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+    >
+      <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+        <div className="block md:hidden">
+          <button
+            type="button"
+            className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
+            onClick={() => router.back()}
+          >
+            <ArrowLeft fontSize={14} strokeWidth={2} />
+          </button>
+        </div>
+        <div>
+          <Breadcrumbs>
+            <BreadcrumbItem
+              title={`${truncateText(currentWorkspace?.name ?? "Workspace", 32)} Projects`}
+              unshrinkTitle={false}
+            />
+          </Breadcrumbs>
+        </div>
+      </div>
+      <div className="flex items-center gap-3">
+        <div className="flex w-full gap-1 items-center justify-start rounded-md px-2 py-1.5 border border-custom-border-300 bg-custom-background-90">
+          <Search size={12} strokeWidth={2} />
+          <input
+            className="w-full border-none bg-transparent text-xs text-custom-text-200 focus:outline-none"
+            value={projectStore.searchQuery}
+            onChange={(e) => projectStore.setSearchQuery(e.target.value)}
+            placeholder="Search"
+          />
+        </div>
+
+        <Button
+          className="flex items-center gap-1 flex-shrink-0"
+          onClick={() => {
+            const e = new KeyboardEvent("keydown", { key: "p" });
+            document.dispatchEvent(e);
+          }}
+        >
+          <Plus size={14} strokeWidth={3} />
+          Add Project
+        </Button>
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx
new file mode 100644
index 000000000..34f122b52
--- /dev/null
+++ b/web/components/headers/workspace-analytics.tsx
@@ -0,0 +1,33 @@
+import { useRouter } from "next/router";
+import { ArrowLeft } from "lucide-react";
+// ui
+import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+
+export const WorkspaceAnalyticsHeader = () => {
+  const router = useRouter();
+
+  return (
+    <>
+      <div
+        className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+      >
+        <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
+          <div className="block md:hidden">
+            <button
+              type="button"
+              className="grid h-8 w-8 place-items-center rounded border border-custom-border-200"
+              onClick={() => router.back()}
+            >
+              <ArrowLeft fontSize={14} strokeWidth={2} />
+            </button>
+          </div>
+          <div>
+            <Breadcrumbs>
+              <BreadcrumbItem title="Workspace Analytics" />
+            </Breadcrumbs>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
new file mode 100644
index 000000000..7b9e5a1bf
--- /dev/null
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { LayoutGrid, Zap } from "lucide-react";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// images
+import githubBlackImage from "/public/logos/github-black.png";
+import githubWhiteImage from "/public/logos/github-white.png";
+// components
+import { ProductUpdatesModal } from "components/common";
+
+export const WorkspaceDashboardHeader = () => {
+  const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
+  // theme
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <>
+      <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
+      <div
+        className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
+      >
+        <div className="flex items-center gap-2 pl-3">
+          <LayoutGrid size={14} strokeWidth={2} />
+          Dashboard
+        </div>
+        <div className="flex items-center gap-3 px-3">
+          <button
+            onClick={() => setIsProductUpdatesModalOpen(true)}
+            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded"
+          >
+            <Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
+            {"What's New?"}
+          </button>
+          <a
+            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded"
+            href="https://github.com/makeplane/plane"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              src={resolvedTheme === "dark" ? githubWhiteImage : githubBlackImage}
+              height={16}
+              width={16}
+              alt="GitHub Logo"
+            />
+            Star us on GitHub
+          </a>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/web/components/icons/alarm-clock-icon.tsx b/web/components/icons/alarm-clock-icon.tsx
index 83180496a..2f0044fcd 100644
--- a/web/components/icons/alarm-clock-icon.tsx
+++ b/web/components/icons/alarm-clock-icon.tsx
@@ -3,6 +3,7 @@ import type { Props } from "./types";
 export const AlarmClockIcon: React.FC<Props> = ({
   width = "24",
   height = "24",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   color = "rgb(var(--color-text-200))",
   className,
 }) => (
diff --git a/web/components/icons/command-icon.tsx b/web/components/icons/command-icon.tsx
index d6465b789..af2b027b1 100644
--- a/web/components/icons/command-icon.tsx
+++ b/web/components/icons/command-icon.tsx
@@ -1,10 +1,11 @@
-import React from "react";
+import { FC } from "react";
 
 import type { Props } from "./types";
 
-export const CommandIcon: React.FC<Props> = ({
+export const CommandIcon: FC<Props> = ({
   width = "81",
   height = "80",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   color = "rgb(var(--color-text-200))",
   className,
 }) => (
diff --git a/web/components/inbox/inbox-action-headers.tsx b/web/components/inbox/action-headers.tsx
similarity index 78%
rename from web/components/inbox/inbox-action-headers.tsx
rename to web/components/inbox/action-headers.tsx
index 86bc15d01..d51ec0302 100644
--- a/web/components/inbox/inbox-action-headers.tsx
+++ b/web/components/inbox/action-headers.tsx
@@ -1,17 +1,12 @@
 import { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-datepicker
 import DatePicker from "react-datepicker";
-// headless ui
 import { Popover } from "@headlessui/react";
 // contexts
 import { useProjectMyMembership } from "contexts/project-member.context";
 // services
-import inboxServices from "services/inbox.service";
+import { InboxService } from "services/inbox.service";
 // hooks
 import useInboxView from "hooks/use-inbox-view";
 import useUserAuth from "hooks/use-user-auth";
@@ -25,7 +20,7 @@ import {
   SelectDuplicateInboxIssueModal,
 } from "components/inbox";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { InboxIcon, StackedLayersHorizontalIcon } from "components/icons";
 import {
@@ -41,6 +36,8 @@ import type { IInboxIssueDetail, TInboxStatus } from "types";
 // fetch-keys
 import { INBOX_ISSUE_DETAILS } from "constants/fetch-keys";
 
+const inboxService = new InboxService();
+
 export const InboxActionHeader = () => {
   const [date, setDate] = useState(new Date());
   const [selectDuplicateIssue, setSelectDuplicateIssue] = useState(false);
@@ -74,19 +71,17 @@ export const InboxActionHeader = () => {
     mutateInboxIssues(
       (prevData: any) =>
         (prevData ?? []).map((i: any) =>
-          i.bridge_id === inboxIssueId
-            ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] }
-            : i
+          i.bridge_id === inboxIssueId ? { ...i, issue_inbox: [{ ...i.issue_inbox[0], ...data }] } : i
         ),
       false
     );
 
-    await inboxServices
+    await inboxService
       .markInboxStatus(
         workspaceSlug.toString(),
         projectId.toString(),
         inboxId.toString(),
-        inboxIssues?.find((inboxIssue) => inboxIssue.bridge_id === inboxIssueId)?.bridge_id!,
+        inboxIssues?.find((inboxIssue: any) => inboxIssue.bridge_id === inboxIssueId)?.bridge_id!,
         data,
         user
       )
@@ -103,9 +98,8 @@ export const InboxActionHeader = () => {
       });
   };
 
-  const issue = inboxIssues?.find((issue) => issue.bridge_id === inboxIssueId);
-  const currentIssueIndex =
-    inboxIssues?.findIndex((issue) => issue.bridge_id === inboxIssueId) ?? 0;
+  const issue = inboxIssues?.find((issue: any) => issue.bridge_id === inboxIssueId);
+  const currentIssueIndex = inboxIssues?.findIndex((issue: any) => issue.bridge_id === inboxIssueId) ?? 0;
 
   useEffect(() => {
     if (!issue?.issue_inbox[0].snoozed_till) return;
@@ -127,8 +121,7 @@ export const InboxActionHeader = () => {
         isOpen={selectDuplicateIssue}
         onClose={() => setSelectDuplicateIssue(false)}
         value={
-          inboxIssues?.find((inboxIssue) => inboxIssue.bridge_id === inboxIssueId)?.issue_inbox[0]
-            .duplicate_to
+          inboxIssues?.find((inboxIssue: any) => inboxIssue.bridge_id === inboxIssueId)?.issue_inbox[0].duplicate_to
         }
         onSubmit={(dupIssueId: string) => {
           markInboxStatus({
@@ -140,7 +133,7 @@ export const InboxActionHeader = () => {
       <AcceptIssueModal
         isOpen={acceptIssueModal}
         handleClose={() => setAcceptIssueModal(false)}
-        data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
+        data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)}
         onSubmit={async () => {
           await markInboxStatus({
             status: 1,
@@ -150,7 +143,7 @@ export const InboxActionHeader = () => {
       <DeclineIssueModal
         isOpen={declineIssueModal}
         handleClose={() => setDeclineIssueModal(false)}
-        data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
+        data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)}
         onSubmit={async () => {
           await markInboxStatus({
             status: -1,
@@ -160,7 +153,7 @@ export const InboxActionHeader = () => {
       <DeleteIssueModal
         isOpen={deleteIssueModal}
         handleClose={() => setDeleteIssueModal(false)}
-        data={inboxIssues?.find((i) => i.bridge_id === inboxIssueId)}
+        data={inboxIssues?.find((i: any) => i.bridge_id === inboxIssueId)}
       />
       <div className="grid grid-cols-4 border-b border-custom-border-200 divide-x divide-custom-border-200">
         <div className="col-span-1 flex justify-between p-4">
@@ -202,10 +195,13 @@ export const InboxActionHeader = () => {
                 <div className="flex-shrink-0">
                   <Popover className="relative">
                     <Popover.Button as="button" type="button">
-                      <SecondaryButton className="flex gap-x-1 items-center" size="sm">
-                        <ClockIcon className="h-4 w-4 text-custom-text-200" />
-                        <span>Snooze</span>
-                      </SecondaryButton>
+                      <Button
+                        variant="neutral-primary"
+                        prependIcon={<ClockIcon className="text-custom-text-200" />}
+                        size="sm"
+                      >
+                        Snooze
+                      </Button>
                     </Popover.Button>
                     <Popover.Panel className="w-80 p-2 absolute right-0 z-10 mt-2 rounded-md border border-custom-border-200 bg-custom-background-80 shadow-lg">
                       {({ close }) => (
@@ -220,8 +216,8 @@ export const InboxActionHeader = () => {
                             minDate={tomorrow}
                             inline
                           />
-                          <PrimaryButton
-                            className="ml-auto"
+                          <Button
+                            variant="primary"
                             onClick={() => {
                               close();
                               markInboxStatus({
@@ -231,7 +227,7 @@ export const InboxActionHeader = () => {
                             }}
                           >
                             Snooze
-                          </PrimaryButton>
+                          </Button>
                         </div>
                       )}
                     </Popover.Panel>
@@ -240,50 +236,50 @@ export const InboxActionHeader = () => {
               )}
               {isAllowed && issueStatus === -2 && (
                 <div className="flex-shrink-0">
-                  <SecondaryButton
+                  <Button
+                    variant="neutral-primary"
                     size="sm"
-                    className="flex gap-2 items-center"
+                    prependIcon={<StackedLayersHorizontalIcon className="text-custom-text-200" />}
                     onClick={() => setSelectDuplicateIssue(true)}
                   >
-                    <StackedLayersHorizontalIcon className="h-4 w-4 text-custom-text-200" />
-                    <span>Mark as duplicate</span>
-                  </SecondaryButton>
+                    Mark as duplicate
+                  </Button>
                 </div>
               )}
               {isAllowed && (issueStatus === 0 || issueStatus === -2) && (
                 <div className="flex-shrink-0">
-                  <SecondaryButton
+                  <Button
+                    variant="neutral-primary"
                     size="sm"
-                    className="flex gap-2 items-center"
+                    prependIcon={<CheckCircleIcon className="text-green-500" />}
                     onClick={() => setAcceptIssueModal(true)}
                   >
-                    <CheckCircleIcon className="h-4 w-4 text-green-500" />
-                    <span>Accept</span>
-                  </SecondaryButton>
+                    Accept
+                  </Button>
                 </div>
               )}
               {isAllowed && issueStatus === -2 && (
                 <div className="flex-shrink-0">
-                  <SecondaryButton
+                  <Button
+                    variant="neutral-primary"
                     size="sm"
-                    className="flex gap-2 items-center"
+                    prependIcon={<XCircleIcon className="text-red-500" />}
                     onClick={() => setDeclineIssueModal(true)}
                   >
-                    <XCircleIcon className="h-4 w-4 text-red-500" />
-                    <span>Decline</span>
-                  </SecondaryButton>
+                    Decline
+                  </Button>
                 </div>
               )}
               {(isAllowed || user?.id === issue?.created_by) && (
                 <div className="flex-shrink-0">
-                  <SecondaryButton
+                  <Button
+                    variant="neutral-primary"
                     size="sm"
-                    className="flex gap-2 items-center"
+                    prependIcon={<TrashIcon className="text-red-500" />}
                     onClick={() => setDeleteIssueModal(true)}
                   >
-                    <TrashIcon className="h-4 w-4 text-red-500" />
-                    <span>Delete</span>
-                  </SecondaryButton>
+                    Delete
+                  </Button>
                 </div>
               )}
             </div>
diff --git a/web/components/inbox/index.ts b/web/components/inbox/index.ts
index 8301d2570..a96cf4446 100644
--- a/web/components/inbox/index.ts
+++ b/web/components/inbox/index.ts
@@ -1,11 +1,8 @@
-export * from "./accept-issue-modal";
-export * from "./decline-issue-modal";
-export * from "./delete-issue-modal";
+export * from "./modals";
+export * from "./action-headers";
 export * from "./filters-dropdown";
 export * from "./filters-list";
-export * from "./inbox-action-headers";
-export * from "./inbox-issue-activity";
-export * from "./inbox-issue-card";
-export * from "./inbox-main-content";
+export * from "./issue-activity";
+export * from "./issue-card";
 export * from "./issues-list-sidebar";
-export * from "./select-duplicate";
+export * from "./main-content";
diff --git a/web/components/inbox/inbox-issue-activity.tsx b/web/components/inbox/issue-activity.tsx
similarity index 69%
rename from web/components/inbox/inbox-issue-activity.tsx
rename to web/components/inbox/issue-activity.tsx
index dfcbf0262..c405608ec 100644
--- a/web/components/inbox/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/issues.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;
@@ -25,31 +29,17 @@ export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
   const { user } = useUser();
 
   const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
+    workspaceSlug && projectId && inboxIssueId ? PROJECT_ISSUES_ACTIVITY(inboxIssueId.toString()) : null,
     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
-      .patchIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        inboxIssueId as string,
-        commentId,
-        data,
-        user
-      )
+    await issueCommentService
+      .patchIssueComment(workspaceSlug as string, projectId as string, inboxIssueId as string, commentId, data, user)
       .then(() => mutateIssueActivity());
   };
 
@@ -58,28 +48,16 @@ export const InboxIssueActivity: React.FC<Props> = ({ issueDetails }) => {
 
     mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
 
-    await issuesService
-      .deleteIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        inboxIssueId as string,
-        commentId,
-        user
-      )
+    await issueCommentService
+      .deleteIssueComment(workspaceSlug as string, projectId as string, inboxIssueId as string, commentId, user)
       .then(() => mutateIssueActivity());
   };
 
   const handleAddComment = async (formData: IIssueComment) => {
     if (!workspaceSlug || !issueDetails) return;
 
-    await issuesService
-      .createIssueComment(
-        workspaceSlug.toString(),
-        issueDetails.project,
-        issueDetails.id,
-        formData,
-        user
-      )
+    await issueCommentService
+      .createIssueComment(workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData, user)
       .then(() => {
         mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
       })
diff --git a/web/components/inbox/inbox-issue-card.tsx b/web/components/inbox/issue-card.tsx
similarity index 94%
rename from web/components/inbox/inbox-issue-card.tsx
rename to web/components/inbox/issue-card.tsx
index f23a4ca6e..468eba908 100644
--- a/web/components/inbox/inbox-issue-card.tsx
+++ b/web/components/inbox/issue-card.tsx
@@ -2,7 +2,7 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import { PriorityIcon } from "components/icons";
 import {
@@ -34,9 +34,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
   const issueStatus = issue.issue_inbox[0].status;
 
   return (
-    <Link
-      href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.bridge_id}`}
-    >
+    <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxId}?inboxIssueId=${issue.bridge_id}`}>
       <a>
         <div
           id={issue.id}
@@ -99,9 +97,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
               <>
                 <ClockIcon className="h-3.5 w-3.5" />
                 <span>
-                  {new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date()
-                    ? "Snoozed date passed"
-                    : "Snoozed"}
+                  {new Date(issue.issue_inbox[0].snoozed_till ?? "") < new Date() ? "Snoozed date passed" : "Snoozed"}
                 </span>
               </>
             ) : issueStatus === 1 ? (
diff --git a/web/components/inbox/issues-list-sidebar.tsx b/web/components/inbox/issues-list-sidebar.tsx
index 5f0fd116a..cf89ccb39 100644
--- a/web/components/inbox/issues-list-sidebar.tsx
+++ b/web/components/inbox/issues-list-sidebar.tsx
@@ -5,7 +5,7 @@ import useInboxView from "hooks/use-inbox-view";
 // components
 import { InboxIssueCard, InboxFiltersList } from "components/inbox";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 
 export const IssuesListSidebar = () => {
   const router = useRouter();
@@ -19,18 +19,13 @@ export const IssuesListSidebar = () => {
       {inboxIssues ? (
         inboxIssues.length > 0 ? (
           <div className="divide-y divide-custom-border-200 overflow-auto h-full">
-            {inboxIssues.map((issue) => (
-              <InboxIssueCard
-                key={issue.id}
-                active={issue.bridge_id === inboxIssueId}
-                issue={issue}
-              />
+            {inboxIssues.map((issue: any) => (
+              <InboxIssueCard key={issue.id} active={issue.bridge_id === inboxIssueId} issue={issue} />
             ))}
           </div>
         ) : (
           <div className="h-full p-4 grid place-items-center text-center text-sm text-custom-text-200">
-            {filtersLength > 0 &&
-              "No issues found for the selected filters. Try changing the filters."}
+            {filtersLength > 0 && "No issues found for the selected filters. Try changing the filters."}
           </div>
         )
       ) : (
diff --git a/web/components/inbox/inbox-main-content.tsx b/web/components/inbox/main-content.tsx
similarity index 86%
rename from web/components/inbox/inbox-main-content.tsx
rename to web/components/inbox/main-content.tsx
index 6c0960729..844717964 100644
--- a/web/components/inbox/inbox-main-content.tsx
+++ b/web/components/inbox/main-content.tsx
@@ -9,7 +9,7 @@ import { useForm } from "react-hook-form";
 // contexts
 import { useProjectMyMembership } from "contexts/project-member.context";
 // services
-import inboxServices from "services/inbox.service";
+import { InboxService } from "services/inbox.service";
 // hooks
 import useInboxView from "hooks/use-inbox-view";
 import useUserAuth from "hooks/use-user-auth";
@@ -17,7 +17,7 @@ import useUserAuth from "hooks/use-user-auth";
 import { IssueDescriptionForm, IssueDetailsSidebar, IssueReaction } from "components/issues";
 import { InboxIssueActivity } from "components/inbox";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import {
   ArrowTopRightOnSquareIcon,
@@ -31,7 +31,7 @@ import {
 // helpers
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import type { IInboxIssue, IIssue } from "types";
+import type { IInboxIssue, IIssue, IUser } from "types";
 // fetch-keys
 import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
@@ -45,6 +45,8 @@ const defaultValues: Partial<IInboxIssue> = {
   labels_list: [],
 };
 
+const inboxService = new InboxService();
+
 export const InboxMainContent: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, projectId, inboxId, inboxIssueId } = router.query;
@@ -63,7 +65,7 @@ export const InboxMainContent: React.FC = () => {
       : null,
     workspaceSlug && projectId && inboxId && inboxIssueId
       ? () =>
-          inboxServices.getInboxIssueById(
+          inboxService.getInboxIssueById(
             workspaceSlug.toString(),
             projectId.toString(),
             inboxId.toString(),
@@ -102,14 +104,14 @@ export const InboxMainContent: React.FC = () => {
 
       const payload = { issue: { ...formData } };
 
-      await inboxServices
+      await inboxService
         .patchInboxIssue(
           workspaceSlug.toString(),
           projectId.toString(),
           inboxId.toString(),
           issueDetails.issue_inbox[0].id,
           payload,
-          user
+          user as IUser
         )
         .then(() => {
           mutateIssueDetails();
@@ -117,23 +119,14 @@ export const InboxMainContent: React.FC = () => {
           mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
         });
     },
-    [
-      workspaceSlug,
-      inboxIssueId,
-      projectId,
-      mutateIssueDetails,
-      inboxId,
-      user,
-      issueDetails,
-      params,
-    ]
+    [workspaceSlug, inboxIssueId, projectId, mutateIssueDetails, inboxId, user, issueDetails, params]
   );
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (!inboxIssues || !inboxIssueId) return;
 
-      const currentIssueIndex = inboxIssues.findIndex((issue) => issue.bridge_id === inboxIssueId);
+      const currentIssueIndex = inboxIssues.findIndex((issue: any) => issue.bridge_id === inboxIssueId);
 
       switch (e.key) {
         case "ArrowUp":
@@ -178,8 +171,7 @@ export const InboxMainContent: React.FC = () => {
 
     reset({
       ...issueDetails,
-      assignees_list:
-        issueDetails.assignees_list ?? (issueDetails.assignee_details ?? []).map((user) => user.id),
+      assignees_list: issueDetails.assignees_list ?? (issueDetails.assignee_details ?? []).map((user) => user.id),
       labels_list: issueDetails.labels_list ?? issueDetails.labels,
     });
   }, [issueDetails, reset, inboxIssueId]);
@@ -194,13 +186,11 @@ export const InboxMainContent: React.FC = () => {
             <InboxIcon height={60} width={60} />
             {inboxIssues && inboxIssues.length > 0 ? (
               <span className="text-custom-text-200">
-                {inboxIssues?.length} issues found. Select an issue from the sidebar to view its
-                details.
+                {inboxIssues?.length} issues found. Select an issue from the sidebar to view its details.
               </span>
             ) : (
               <span className="text-custom-text-200">
-                No issues found. Use{" "}
-                <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre> shortcut
+                No issues found. Use <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre> shortcut
                 to create a new issue
               </span>
             )}
@@ -247,18 +237,12 @@ export const InboxMainContent: React.FC = () => {
                   {new Date(issueDetails.issue_inbox[0].snoozed_till ?? "") < new Date() ? (
                     <p>
                       This issue was snoozed till{" "}
-                      {renderShortDateWithYearFormat(
-                        issueDetails.issue_inbox[0].snoozed_till ?? ""
-                      )}
-                      .
+                      {renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
                     </p>
                   ) : (
                     <p>
                       This issue has been snoozed till{" "}
-                      {renderShortDateWithYearFormat(
-                        issueDetails.issue_inbox[0].snoozed_till ?? ""
-                      )}
-                      .
+                      {renderShortDateWithYearFormat(issueDetails.issue_inbox[0].snoozed_till ?? "")}.
                     </p>
                   )}
                 </>
@@ -293,17 +277,11 @@ export const InboxMainContent: React.FC = () => {
                   description_html: issueDetails.description_html,
                 }}
                 handleFormSubmit={submitChanges}
-                isAllowed={
-                  memberRole.isMember || memberRole.isOwner || user?.id === issueDetails.created_by
-                }
+                isAllowed={memberRole.isMember || memberRole.isOwner || user?.id === issueDetails.created_by}
               />
             </div>
 
-            <IssueReaction
-              projectId={projectId}
-              workspaceSlug={workspaceSlug}
-              issueId={issueDetails.id}
-            />
+            <IssueReaction projectId={projectId} workspaceSlug={workspaceSlug} issueId={issueDetails.id} />
 
             <InboxIssueActivity issueDetails={issueDetails} />
           </div>
diff --git a/web/components/inbox/accept-issue-modal.tsx b/web/components/inbox/modals/accept-issue-modal.tsx
similarity index 92%
rename from web/components/inbox/accept-issue-modal.tsx
rename to web/components/inbox/modals/accept-issue-modal.tsx
index be557536b..bca83a3ec 100644
--- a/web/components/inbox/accept-issue-modal.tsx
+++ b/web/components/inbox/modals/accept-issue-modal.tsx
@@ -5,7 +5,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { CheckCircleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IInboxIssue } from "types";
 
@@ -76,10 +76,12 @@ export const AcceptIssueModal: React.FC<Props> = ({ isOpen, handleClose, data, o
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={handleAccept} loading={isAccepting}>
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={handleAccept} loading={isAccepting}>
                       {isAccepting ? "Accepting..." : "Accept Issue"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/inbox/decline-issue-modal.tsx b/web/components/inbox/modals/decline-issue-modal.tsx
similarity index 88%
rename from web/components/inbox/decline-issue-modal.tsx
rename to web/components/inbox/modals/decline-issue-modal.tsx
index b3168915a..48786da55 100644
--- a/web/components/inbox/decline-issue-modal.tsx
+++ b/web/components/inbox/modals/decline-issue-modal.tsx
@@ -5,7 +5,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IInboxIssue } from "types";
 
@@ -60,10 +60,7 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Decline Issue</h3>
@@ -79,10 +76,12 @@ export const DeclineIssueModal: React.FC<Props> = ({ isOpen, handleClose, data,
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleDecline} loading={isDeclining}>
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleDecline} loading={isDeclining}>
                       {isDeclining ? "Declining..." : "Decline Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/inbox/delete-issue-modal.tsx b/web/components/inbox/modals/delete-issue-modal.tsx
similarity index 89%
rename from web/components/inbox/delete-issue-modal.tsx
rename to web/components/inbox/modals/delete-issue-modal.tsx
index a00057113..bad8fc8b4 100644
--- a/web/components/inbox/delete-issue-modal.tsx
+++ b/web/components/inbox/modals/delete-issue-modal.tsx
@@ -7,7 +7,7 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import inboxServices from "services/inbox.service";
+import { InboxService } from "services/inbox.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useInboxView from "hooks/use-inbox-view";
@@ -15,7 +15,7 @@ import useUser from "hooks/use-user";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IInboxIssue } from "types";
 // fetch-keys
@@ -27,6 +27,8 @@ type Props = {
   data: IInboxIssue | undefined;
 };
 
+const inboxService = new InboxService();
+
 export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data }) => {
   const [isDeleting, setIsDeleting] = useState(false);
 
@@ -47,7 +49,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
 
     setIsDeleting(true);
 
-    inboxServices
+    inboxService
       .deleteInboxIssue(
         workspaceSlug.toString(),
         projectId.toString(),
@@ -115,10 +117,7 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
@@ -130,15 +129,16 @@ export const DeleteIssueModal: React.FC<Props> = ({ isOpen, handleClose, data })
                       <span className="break-words font-medium text-custom-text-100">
                         {data?.project_detail?.identifier}-{data?.sequence_id}
                       </span>
-                      {""}? The issue will only be deleted from the inbox and this action cannot be
-                      undone.
+                      {""}? The issue will only be deleted from the inbox and this action cannot be undone.
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleDelete} loading={isDeleting}>
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleDelete} loading={isDeleting}>
                       {isDeleting ? "Deleting..." : "Delete Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/inbox/modals/index.ts b/web/components/inbox/modals/index.ts
new file mode 100644
index 000000000..2b45346d2
--- /dev/null
+++ b/web/components/inbox/modals/index.ts
@@ -0,0 +1,4 @@
+export * from "./accept-issue-modal";
+export * from "./decline-issue-modal";
+export * from "./delete-issue-modal";
+export * from "./select-duplicate";
diff --git a/web/components/inbox/select-duplicate.tsx b/web/components/inbox/modals/select-duplicate.tsx
similarity index 82%
rename from web/components/inbox/select-duplicate.tsx
rename to web/components/inbox/modals/select-duplicate.tsx
index 1cc905080..11334d45d 100644
--- a/web/components/inbox/select-duplicate.tsx
+++ b/web/components/inbox/modals/select-duplicate.tsx
@@ -1,19 +1,14 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
-// react-hook-form
-import { SubmitHandler, useForm, UseFormWatch } from "react-hook-form";
-// headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
+
 // hooks
 import useToast from "hooks/use-toast";
 // services
-import issuesServices from "services/issues.service";
+import { IssueService } from "services/issue";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { LayerDiagonalIcon } from "components/icons";
@@ -27,6 +22,8 @@ type Props = {
   onSubmit: (issueId: string) => void;
 };
 
+const issueService = new IssueService();
+
 export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
   const { isOpen, onClose, onSubmit, value } = props;
 
@@ -39,12 +36,10 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
   const { workspaceSlug, projectId, issueId } = router.query;
 
   const { data: issues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string)
-      : null,
+    workspaceSlug && projectId ? PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string) : null,
     workspaceSlug && projectId
       ? () =>
-          issuesServices
+          issueService
             .getIssues(workspaceSlug as string, projectId as string)
             .then((res) => res.filter((issue) => issue.id !== issueId))
       : null
@@ -71,8 +66,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
     handleClose();
   };
 
-  const filteredIssues =
-    (query === "" ? issues : issues?.filter((issue) => issue.name.includes(query))) ?? [];
+  const filteredIssues = (query === "" ? issues : issues?.filter((issue) => issue.name.includes(query))) ?? [];
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
@@ -128,9 +122,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                       {filteredIssues.length > 0 ? (
                         <li className="p-2">
                           {query === "" && (
-                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
-                              Select issue
-                            </h2>
+                            <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">Select issue</h2>
                           )}
                           <ul className="text-sm text-custom-text-100">
                             {filteredIssues.map((issue) => (
@@ -140,9 +132,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                                 value={issue.id}
                                 className={({ active, selected }) =>
                                   `flex w-full cursor-pointer select-none items-center gap-2 rounded-md px-3 py-2 text-custom-text-200 ${
-                                    active || selected
-                                      ? "bg-custom-background-80 text-custom-text-100"
-                                      : ""
+                                    active || selected ? "bg-custom-background-80 text-custom-text-100" : ""
                                   } `
                                 }
                               >
@@ -154,11 +144,8 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                                     }}
                                   />
                                   <span className="flex-shrink-0 text-xs text-custom-text-200">
-                                    {
-                                      issues?.find((i) => i.id === issue.id)?.project_detail
-                                        ?.identifier
-                                    }
-                                    -{issue.sequence_id}
+                                    {issues?.find((i) => i.id === issue.id)?.project_detail?.identifier}-
+                                    {issue.sequence_id}
                                   </span>
                                   <span className="text-custom-text-200">{issue.name}</span>
                                 </div>
@@ -171,10 +158,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
                           <LayerDiagonalIcon height="56" width="56" />
                           <h3 className="text-sm text-custom-text-200">
                             No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-custom-background-80 px-2 py-1">
-                              C
-                            </pre>
-                            .
+                            <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>.
                           </h3>
                         </div>
                       )}
@@ -183,8 +167,12 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
 
                   {filteredIssues.length > 0 && (
                     <div className="flex items-center justify-end gap-2 p-3">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton onClick={handleSubmit}>Mark as original</PrimaryButton>
+                      <Button variant="neutral-primary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" onClick={handleSubmit}>
+                        Mark as original
+                      </Button>
                     </div>
                   )}
                 </Dialog.Panel>
diff --git a/web/components/integration/delete-import-modal.tsx b/web/components/integration/delete-import-modal.tsx
index d869ae2a6..f9a9517d9 100644
--- a/web/components/integration/delete-import-modal.tsx
+++ b/web/components/integration/delete-import-modal.tsx
@@ -7,15 +7,15 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import IntegrationService from "services/integration";
+import { IntegrationService } from "services/integrations/integration.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, Input, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
-import { ICurrentUserResponse, IImporterService } from "types";
+import { IUser, IImporterService } from "types";
 // fetch-keys
 import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
 
@@ -23,9 +23,12 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data: IImporterService | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | 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",
@@ -92,10 +96,7 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-500"
-                        aria-hidden="true"
-                      />
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-500" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
@@ -104,38 +105,39 @@ export const DeleteImportModal: React.FC<Props> = ({ isOpen, handleClose, data,
                   <span>
                     <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete import from{" "}
-                      <span className="break-words font-semibold capitalize text-custom-text-100">
-                        {data?.service}
-                      </span>
-                      ? All of the data related to the import will be permanently removed. This
-                      action cannot be undone.
+                      <span className="break-words font-semibold capitalize text-custom-text-100">{data?.service}</span>
+                      ? All of the data related to the import will be permanently removed. This action cannot be undone.
                     </p>
                   </span>
                   <div>
                     <p className="text-sm text-custom-text-200">
-                      To confirm, type{" "}
-                      <span className="font-medium text-custom-text-100">delete import</span> below:
+                      To confirm, type <span className="font-medium text-custom-text-100">delete import</span> below:
                     </p>
                     <Input
+                      id="typeDelete"
                       type="text"
                       name="typeDelete"
-                      className="mt-2"
+                      value=""
                       onChange={(e) => {
                         if (e.target.value === "delete import") setConfirmDeleteImport(true);
                         else setConfirmDeleteImport(false);
                       }}
                       placeholder="Enter 'delete import'"
+                      className="mt-2 w-full"
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
                       onClick={handleDeletion}
                       disabled={!confirmDeleteImport}
                       loading={deleteLoading}
                     >
                       {deleteLoading ? "Deleting..." : "Delete Project"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/integration/github/auth.tsx b/web/components/integration/github/auth.tsx
index b530b4a24..c94bfacd5 100644
--- a/web/components/integration/github/auth.tsx
+++ b/web/components/integration/github/auth.tsx
@@ -1,7 +1,7 @@
 // hooks
 import useIntegrationPopup from "hooks/use-integration-popup";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import { IWorkspaceIntegration } from "types";
 
@@ -16,11 +16,13 @@ export const GithubAuth: React.FC<Props> = ({ workspaceIntegration, provider })
   return (
     <div>
       {workspaceIntegration && workspaceIntegration?.id ? (
-        <PrimaryButton disabled>Successfully Connected</PrimaryButton>
+        <Button variant="primary" disabled>
+          Successfully Connected
+        </Button>
       ) : (
-        <PrimaryButton onClick={startAuth} loading={isConnecting}>
+        <Button variant="primary" onClick={startAuth} loading={isConnecting}>
           {isConnecting ? "Connecting..." : "Connect"}
-        </PrimaryButton>
+        </Button>
       )}
     </div>
   );
diff --git a/web/components/integration/github/import-configure.tsx b/web/components/integration/github/import-configure.tsx
index ca5a55a77..f804d32dd 100644
--- a/web/components/integration/github/import-configure.tsx
+++ b/web/components/integration/github/import-configure.tsx
@@ -1,7 +1,6 @@
 // components
+import { Button } from "@plane/ui";
 import { GithubAuth, TIntegrationSteps } from "components/integration";
-// ui
-import { PrimaryButton } from "components/ui";
 // types
 import { IAppIntegration, IWorkspaceIntegration } from "types";
 
@@ -20,9 +19,7 @@ export const GithubImportConfigure: React.FC<Props> = ({
 }) => {
   // current integration from all the integrations available
   const integration =
-    appIntegrations &&
-    appIntegrations.length > 0 &&
-    appIntegrations.find((i) => i.provider === provider);
+    appIntegrations && appIntegrations.length > 0 && appIntegrations.find((i) => i.provider === provider);
 
   // current integration from workspace integrations
   const workspaceIntegration =
@@ -44,12 +41,13 @@ export const GithubImportConfigure: React.FC<Props> = ({
       </div>
 
       <div className="flex items-center justify-end">
-        <PrimaryButton
+        <Button
+          variant="primary"
           onClick={() => handleStepChange("import-data")}
           disabled={workspaceIntegration && workspaceIntegration?.id ? false : true}
         >
           Next
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/integration/github/import-confirm.tsx b/web/components/integration/github/import-confirm.tsx
index 8a7383062..65f3e82b2 100644
--- a/web/components/integration/github/import-confirm.tsx
+++ b/web/components/integration/github/import-confirm.tsx
@@ -3,7 +3,7 @@ import { FC } from "react";
 // react-hook-form
 import { UseFormWatch } from "react-hook-form";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import { TFormValues, TIntegrationSteps } from "components/integration";
 
@@ -15,13 +15,16 @@ type Props = {
 export const GithubImportConfirm: FC<Props> = ({ handleStepChange, watch }) => (
   <div className="mt-6">
     <h4 className="font-medium text-custom-text-200">
-      You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm &
-      Import{'" '}
+      You are about to import issues from {watch("github").full_name}. Click on {'"'}Confirm & Import{'" '}
       to complete the process.
     </h4>
     <div className="mt-6 flex items-center justify-between">
-      <SecondaryButton onClick={() => handleStepChange("import-users")}>Back</SecondaryButton>
-      <PrimaryButton type="submit">Confirm & Import</PrimaryButton>
+      <Button variant="neutral-primary" onClick={() => handleStepChange("import-users")}>
+        Back
+      </Button>
+      <Button variant="primary" type="submit">
+        Confirm & Import
+      </Button>
     </div>
   </div>
 );
diff --git a/web/components/integration/github/import-data.tsx b/web/components/integration/github/import-data.tsx
index eeae3f28d..32f765277 100644
--- a/web/components/integration/github/import-data.tsx
+++ b/web/components/integration/github/import-data.tsx
@@ -7,7 +7,8 @@ import useProjects from "hooks/use-projects";
 // components
 import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
 // ui
-import { CustomSearchSelect, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
+import { Button, ToggleSwitch } from "@plane/ui";
+import { CustomSearchSelect } from "components/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
@@ -51,11 +52,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
                     integration={integration}
                     value={value ? value.id : null}
                     label={
-                      value ? (
-                        `${value.full_name}`
-                      ) : (
-                        <span className="text-custom-text-200">Select Repository</span>
-                      )
+                      value ? `${value.full_name}` : <span className="text-custom-text-200">Select Repository</span>
                     }
                     onChange={onChange}
                     characterLimit={50}
@@ -68,9 +65,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Select Project</h4>
-            <p className="text-xs text-custom-text-200">
-              Select the project to import the issues to.
-            </p>
+            <p className="text-xs text-custom-text-200">Select the project to import the issues to.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             {projects && (
@@ -99,9 +94,7 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         <div className="grid grid-cols-12 gap-4 sm:gap-16">
           <div className="col-span-12 sm:col-span-8">
             <h4 className="font-semibold">Sync Issues</h4>
-            <p className="text-xs text-custom-text-200">
-              Set whether you want to sync the issues or not.
-            </p>
+            <p className="text-xs text-custom-text-200">Set whether you want to sync the issues or not.</p>
           </div>
           <div className="col-span-12 sm:col-span-4">
             <Controller
@@ -115,13 +108,16 @@ export const GithubImportData: FC<Props> = ({ handleStepChange, integration, con
         </div>
       </div>
       <div className="mt-6 flex items-center justify-end gap-2">
-        <SecondaryButton onClick={() => handleStepChange("import-configure")}>Back</SecondaryButton>
-        <PrimaryButton
+        <Button variant="neutral-primary" onClick={() => handleStepChange("import-configure")}>
+          Back
+        </Button>
+        <Button
+          variant="primary"
           onClick={() => handleStepChange("repo-details")}
           disabled={!watch("github") || !watch("project")}
         >
           Next
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/integration/github/import-users.tsx b/web/components/integration/github/import-users.tsx
index e4caf349b..ad0654438 100644
--- a/web/components/integration/github/import-users.tsx
+++ b/web/components/integration/github/import-users.tsx
@@ -3,14 +3,9 @@ import { FC } from "react";
 // react-hook-form
 import { UseFormWatch } from "react-hook-form";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
-import {
-  IUserDetails,
-  SingleUserSelect,
-  TFormValues,
-  TIntegrationSteps,
-} from "components/integration";
+import { IUserDetails, SingleUserSelect, TFormValues, TIntegrationSteps } from "components/integration";
 
 type Props = {
   handleStepChange: (value: TIntegrationSteps) => void;
@@ -28,9 +23,7 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
         <div className="mb-2 grid grid-cols-3 gap-2 text-sm font-medium">
           <div className="text-custom-text-200">Name</div>
           <div className="text-custom-text-200">Import as...</div>
-          <div className="text-right">
-            {users.filter((u) => u.import !== false).length} users selected
-          </div>
+          <div className="text-right">{users.filter((u) => u.import !== false).length} users selected</div>
         </div>
         <div className="space-y-2">
           {watch("collaborators").map((collaborator, index) => (
@@ -45,10 +38,12 @@ export const GithubImportUsers: FC<Props> = ({ handleStepChange, users, setUsers
         </div>
       </div>
       <div className="mt-6 flex items-center justify-end gap-2">
-        <SecondaryButton onClick={() => handleStepChange("repo-details")}>Back</SecondaryButton>
-        <PrimaryButton onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
+        <Button variant="neutral-primary" onClick={() => handleStepChange("repo-details")}>
+          Back
+        </Button>
+        <Button variant="primary" onClick={() => handleStepChange("import-confirm")} disabled={isInvalid}>
           Next
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/integration/github/repo-details.tsx b/web/components/integration/github/repo-details.tsx
index 8a9c97193..70e462a10 100644
--- a/web/components/integration/github/repo-details.tsx
+++ b/web/components/integration/github/repo-details.tsx
@@ -7,9 +7,9 @@ import useSWR from "swr";
 // react-hook-form
 import { UseFormSetValue } from "react-hook-form";
 // services
-import GithubIntegrationService from "services/integration/github.service";
+import { GithubIntegrationService } from "services/integrations";
 // ui
-import { Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Loader } from "@plane/ui";
 // types
 import { IUserDetails, TFormValues, TIntegrationSteps } from "components/integration";
 // fetch-keys
@@ -22,22 +22,18 @@ type Props = {
   setValue: UseFormSetValue<TFormValues>;
 };
 
-export const GithubRepoDetails: FC<Props> = ({
-  selectedRepo,
-  handleStepChange,
-  setUsers,
-  setValue,
-}) => {
+// services
+const githubIntegrationService = new GithubIntegrationService();
+
+export const GithubRepoDetails: FC<Props> = ({ selectedRepo, handleStepChange, setUsers, setValue }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const { data: repoInfo } = useSWR(
-    workspaceSlug && selectedRepo
-      ? GITHUB_REPOSITORY_INFO(workspaceSlug as string, selectedRepo.name)
-      : null,
+    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,
           })
@@ -92,13 +88,16 @@ export const GithubRepoDetails: FC<Props> = ({
         </Loader>
       )}
       <div className="mt-6 flex items-center justify-end gap-2">
-        <SecondaryButton onClick={() => handleStepChange("import-data")}>Back</SecondaryButton>
-        <PrimaryButton
+        <Button variant="neutral-primary" onClick={() => handleStepChange("import-data")}>
+          Back
+        </Button>
+        <Button
+          variant="primary"
           onClick={() => handleStepChange("import-users")}
           disabled={!repoInfo || repoInfo.issue_count === 0}
         >
           Next
-        </PrimaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/integration/github/root.tsx b/web/components/integration/github/root.tsx
index 2e5d9e0c4..0716a4768 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/integration";
-import GithubIntegrationService from "services/integration/github.service";
+import { IntegrationService, GithubIntegrationService } from "services/integrations";
 // hooks
 import useToast from "hooks/use-toast";
 // components
@@ -27,20 +26,11 @@ import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
 // images
 import GithubLogo from "public/services/github.png";
 // types
-import { ICurrentUserResponse, IGithubRepoCollaborator, IGithubServiceImportFormData } from "types";
+import { IUser, IGithubRepoCollaborator, IGithubServiceImportFormData } from "types";
 // fetch-keys
-import {
-  APP_INTEGRATIONS,
-  IMPORTER_SERVICES_LIST,
-  WORKSPACE_INTEGRATIONS,
-} from "constants/fetch-keys";
+import { APP_INTEGRATIONS, IMPORTER_SERVICES_LIST, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
 
-export type TIntegrationSteps =
-  | "import-configure"
-  | "import-data"
-  | "repo-details"
-  | "import-users"
-  | "import-confirm";
+export type TIntegrationSteps = "import-configure" | "import-data" | "repo-details" | "import-users" | "import-confirm";
 export interface IIntegrationData {
   state: TIntegrationSteps;
 }
@@ -90,9 +80,13 @@ const integrationWorkflowData = [
 ];
 
 type Props = {
-  user: ICurrentUserResponse | undefined;
+  user: IUser | 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",
@@ -108,21 +102,15 @@ 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 = () => {
-    const currentElementIndex = integrationWorkflowData.findIndex(
-      (i) => i?.key === currentStep?.state
-    );
+    const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
 
     return currentElementIndex;
   };
@@ -133,14 +121,11 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
 
   // current integration from all the integrations available
   const integration =
-    appIntegrations &&
-    appIntegrations.length > 0 &&
-    appIntegrations.find((i) => i.provider === provider);
+    appIntegrations && appIntegrations.length > 0 && appIntegrations.find((i) => i.provider === provider);
 
   // current integration from workspace integrations
   const workspaceIntegration =
-    integration &&
-    workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
+    integration && workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
 
   const createGithubImporterService = async (formData: TFormValues) => {
     if (!formData.github || !formData.project) return;
@@ -161,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));
@@ -214,9 +200,7 @@ export const GithubImporterRoot: React.FC<Props> = ({ user }) => {
                     <div
                       key={index}
                       className={`border-b px-7 ${
-                        index <= activeIntegrationState() - 1
-                          ? `border-custom-primary`
-                          : `border-custom-border-200`
+                        index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-custom-border-200`
                       }`}
                     >
                       {" "}
diff --git a/web/components/integration/github/select-repository.tsx b/web/components/integration/github/select-repository.tsx
index ddc5e3a8a..71a142f24 100644
--- a/web/components/integration/github/select-repository.tsx
+++ b/web/components/integration/github/select-repository.tsx
@@ -1,17 +1,14 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWRInfinite from "swr/infinite";
-
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // ui
 import { CustomSearchSelect } from "components/ui";
 // helpers
 import { truncateText } from "helpers/string.helper";
 // types
-import { IWorkspaceIntegration, IGithubRepository } from "types";
+import { IWorkspaceIntegration } from "types";
 
 type Props = {
   integration: IWorkspaceIntegration;
@@ -21,22 +18,18 @@ type Props = {
   characterLimit?: number;
 };
 
-export const SelectRepository: React.FC<Props> = ({
-  integration,
-  value,
-  label,
-  onChange,
-  characterLimit = 25,
-}) => {
+const projectService = new ProjectService();
+
+export const SelectRepository: React.FC<Props> = (props) => {
+  const { integration, value, label, onChange, characterLimit = 25 } = props;
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const getKey = (pageIndex: number) => {
     if (!workspaceSlug || !integration) return;
 
-    return `${
-      process.env.NEXT_PUBLIC_API_BASE_URL
-    }/api/workspaces/${workspaceSlug}/workspace-integrations/${
+    return `${process.env.NEXT_PUBLIC_API_BASE_URL}/api/workspaces/${workspaceSlug}/workspace-integrations/${
       integration.id
     }/github-repositories/?page=${++pageIndex}`;
   };
@@ -47,12 +40,7 @@ export const SelectRepository: React.FC<Props> = ({
     return data;
   };
 
-  const {
-    data: paginatedData,
-    size,
-    setSize,
-    isValidating,
-  } = useSWRInfinite(getKey, fetchGithubRepos);
+  const { data: paginatedData, size, setSize, isValidating } = useSWRInfinite(getKey, fetchGithubRepos);
 
   let userRepositories = (paginatedData ?? []).map((data) => data.repositories).flat();
   userRepositories = userRepositories.filter((data) => data?.id);
diff --git a/web/components/integration/github/single-user-select.tsx b/web/components/integration/github/single-user-select.tsx
index 13671ac89..892a0d306 100644
--- a/web/components/integration/github/single-user-select.tsx
+++ b/web/components/integration/github/single-user-select.tsx
@@ -3,9 +3,10 @@ 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, Input } from "components/ui";
+import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui";
+import { Input } from "@plane/ui";
 // types
 import { IGithubRepoCollaborator } from "types";
 import { IUserDetails } from "./root";
@@ -34,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;
@@ -69,11 +73,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
       <div>
         <CustomSelect
           value={users[index].import}
-          label={
-            <div className="text-xs">
-              {importOptions.find((o) => o.key === users[index].import)?.label}
-            </div>
-          }
+          label={<div className="text-xs">{importOptions.find((o) => o.key === users[index].import)?.label}</div>}
           onChange={(val: any) => {
             const newUsers = [...users];
             newUsers[index].import = val;
@@ -92,6 +92,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
       </div>
       {users[index].import === "invite" && (
         <Input
+          id="email"
           type="email"
           name={`userEmail${index}`}
           value={users[index].email}
@@ -101,7 +102,7 @@ export const SingleUserSelect: React.FC<Props> = ({ collaborator, index, users,
             setUsers(newUsers);
           }}
           placeholder="Enter email of the user"
-          className="py-1 text-xs"
+          className="py-1 text-xs w-full"
         />
       )}
       {users[index].import === "map" && members && (
diff --git a/web/components/integration/guide.tsx b/web/components/integration/guide.tsx
index 2ee0e0121..fe8f29b24 100644
--- a/web/components/integration/guide.tsx
+++ b/web/components/integration/guide.tsx
@@ -9,16 +9,11 @@ import useSWR, { mutate } from "swr";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
-import IntegrationService from "services/integration";
+import { IntegrationService } from "services/integrations";
 // components
-import {
-  DeleteImportModal,
-  GithubImporterRoot,
-  JiraImporterRoot,
-  SingleImport,
-} from "components/integration";
+import { DeleteImportModal, GithubImporterRoot, JiraImporterRoot, SingleImport } from "components/integration";
 // ui
-import { Loader, PrimaryButton } from "components/ui";
+import { Button, Loader } from "@plane/ui";
 // icons
 import { ArrowPathIcon } from "@heroicons/react/24/outline";
 // types
@@ -28,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);
@@ -40,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) => {
@@ -85,26 +83,17 @@ const IntegrationGuide = () => {
               >
                 <div className="flex items-start gap-4">
                   <div className="relative h-10 w-10 flex-shrink-0">
-                    <Image
-                      src={service.logo}
-                      layout="fill"
-                      objectFit="cover"
-                      alt={`${service.title} Logo`}
-                    />
+                    <Image src={service.logo} layout="fill" objectFit="cover" alt={`${service.title} Logo`} />
                   </div>
                   <div>
                     <h3 className="flex items-center gap-4 text-sm font-medium">{service.title}</h3>
-                    <p className="text-sm text-custom-text-200 tracking-tight">
-                      {service.description}
-                    </p>
+                    <p className="text-sm text-custom-text-200 tracking-tight">{service.description}</p>
                   </div>
                 </div>
                 <div className="flex-shrink-0">
                   <Link href={`/${workspaceSlug}/settings/imports?provider=${service.provider}`}>
                     <a>
-                      <PrimaryButton>
-                        <span className="capitalize">{service.type}</span>
-                      </PrimaryButton>
+                      <Button variant="primary">{service.type}</Button>
                     </a>
                   </Link>
                 </div>
@@ -119,9 +108,7 @@ const IntegrationGuide = () => {
                     className="flex flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 py-1 px-1.5 text-xs outline-none"
                     onClick={() => {
                       setRefreshing(true);
-                      mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() =>
-                        setRefreshing(false)
-                      );
+                      mutate(IMPORTER_SERVICES_LIST(workspaceSlug as string)).then(() => setRefreshing(false));
                     }}
                   >
                     <ArrowPathIcon className={`h-3 w-3 ${refreshing ? "animate-spin" : ""}`} />{" "}
@@ -145,9 +132,7 @@ const IntegrationGuide = () => {
                       </div>
                     </div>
                   ) : (
-                    <p className="text-sm text-custom-text-200 px-4 py-6">
-                      No previous imports available.
-                    </p>
+                    <p className="text-sm text-custom-text-200 px-4 py-6">No previous imports available.</p>
                   )
                 ) : (
                   <Loader className="mt-6 grid grid-cols-1 gap-3">
diff --git a/web/components/integration/jira/give-details.tsx b/web/components/integration/jira/give-details.tsx
index fa04c3404..9697dd01d 100644
--- a/web/components/integration/jira/give-details.tsx
+++ b/web/components/integration/jira/give-details.tsx
@@ -1,25 +1,18 @@
 import React from "react";
-
-// next
 import Link from "next/link";
-
-// react hook form
 import { useFormContext, Controller } from "react-hook-form";
-
 // icons
 import { PlusIcon } from "@heroicons/react/20/solid";
-
 // hooks
 import useProjects from "hooks/use-projects";
-
 // components
-import { Input, CustomSelect } from "components/ui";
-
+import { CustomSelect } from "components/ui";
+import { Input } from "@plane/ui";
+// types
 import { IJiraImporterForm } from "types";
 
 export const JiraGetImportDetail: React.FC = () => {
   const {
-    register,
     control,
     formState: { errors },
   } = useFormContext<IJiraImporterForm>();
@@ -42,15 +35,24 @@ export const JiraGetImportDetail: React.FC = () => {
         </div>
 
         <div className="col-span-1">
-          <Input
-            id="metadata.api_token"
+          <Controller
+            control={control}
             name="metadata.api_token"
-            placeholder="XXXXXXXX"
-            validations={{
+            rules={{
               required: "Please enter your personal access token.",
             }}
-            register={register}
-            error={errors.metadata?.api_token}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.api_token"
+                name="metadata.api_token"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                placeholder="XXXXXXXX"
+                className="w-full"
+              />
+            )}
           />
         </div>
       </div>
@@ -61,15 +63,25 @@ export const JiraGetImportDetail: React.FC = () => {
           <p className="text-sm text-custom-text-200">If XXX-123 is your issue, then enter XXX</p>
         </div>
         <div className="col-span-1">
-          <Input
-            id="metadata.project_key"
+          <Controller
+            control={control}
             name="metadata.project_key"
-            placeholder="LIN"
-            register={register}
-            validations={{
+            rules={{
               required: "Please enter your project key.",
             }}
-            error={errors.metadata?.project_key}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.project_key"
+                name="metadata.project_key"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.metadata?.project_key)}
+                placeholder="LIN"
+                className="w-full"
+              />
+            )}
           />
         </div>
       </div>
@@ -77,21 +89,28 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Jira Email Address</h3>
-          <p className="text-sm text-custom-text-200">
-            Enter the Gmail account that you use in Jira account
-          </p>
+          <p className="text-sm text-custom-text-200">Enter the Gmail account that you use in Jira account</p>
         </div>
         <div className="col-span-1">
-          <Input
-            id="metadata.email"
+          <Controller
+            control={control}
             name="metadata.email"
-            type="email"
-            placeholder="name@company.com"
-            register={register}
-            validations={{
+            rules={{
               required: "Please enter email address.",
             }}
-            error={errors.metadata?.email}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.email"
+                name="metadata.email"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.metadata?.email)}
+                placeholder="name@company.com"
+                className="w-full"
+              />
+            )}
           />
         </div>
       </div>
@@ -102,16 +121,25 @@ export const JiraGetImportDetail: React.FC = () => {
           <p className="text-sm text-custom-text-200">Enter your companies cloud host name</p>
         </div>
         <div className="col-span-1">
-          <Input
-            id="metadata.cloud_hostname"
+          <Controller
+            control={control}
             name="metadata.cloud_hostname"
-            type="email"
-            placeholder="my-company.atlassian.net"
-            register={register}
-            validations={{
+            rules={{
               required: "Please enter your cloud host name.",
             }}
-            error={errors.metadata?.cloud_hostname}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="metadata.cloud_hostname"
+                name="metadata.cloud_hostname"
+                type="email"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.metadata?.cloud_hostname)}
+                placeholder="my-company.atlassian.net"
+                className="w-full"
+              />
+            )}
           />
         </div>
       </div>
@@ -119,9 +147,7 @@ export const JiraGetImportDetail: React.FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Import to project</h3>
-          <p className="text-sm text-custom-text-200">
-            Select which project you want to import to.
-          </p>
+          <p className="text-sm text-custom-text-200">Select which project you want to import to.</p>
         </div>
         <div className="col-span-1">
           <Controller
diff --git a/web/components/integration/jira/import-users.tsx b/web/components/integration/jira/import-users.tsx
index bb3057f1e..c903bf798 100644
--- a/web/components/integration/jira/import-users.tsx
+++ b/web/components/integration/jira/import-users.tsx
@@ -1,30 +1,26 @@
 import { FC } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import useSWR from "swr";
-
-// react-hook-form
 import { useFormContext, useFieldArray, Controller } from "react-hook-form";
-
 // fetch keys
 import { WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys";
-
 // services
-import workspaceService from "services/workspace.service";
-
+import { WorkspaceService } from "services/workspace.service";
 // components
-import { ToggleSwitch, Input, CustomSelect, CustomSearchSelect, Avatar } from "components/ui";
-
+import { CustomSelect, CustomSearchSelect, Avatar } from "components/ui";
+import { Input, ToggleSwitch } from "@plane/ui";
+// types
 import { IJiraImporterForm } from "types";
 
+const workspaceService = new WorkspaceService();
+
 export const JiraImportUsers: FC = () => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // form info
   const {
     control,
     watch,
-    register,
     formState: { errors },
   } = useFormContext<IJiraImporterForm>();
 
@@ -33,14 +29,9 @@ export const JiraImportUsers: FC = () => {
     name: "data.users",
   });
 
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
   const { data: members } = useSWR(
     workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(workspaceSlug?.toString() ?? "") : null,
-    workspaceSlug
-      ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug?.toString() ?? "")
-      : null
+    workspaceSlug ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug?.toString() ?? "") : null
   );
 
   const options = members?.map((member) => ({
@@ -59,17 +50,13 @@ export const JiraImportUsers: FC = () => {
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
         <div className="col-span-1">
           <h3 className="font-semibold">Users</h3>
-          <p className="text-sm text-custom-text-200">
-            Update, invite or choose not to invite assignee
-          </p>
+          <p className="text-sm text-custom-text-200">Update, invite or choose not to invite assignee</p>
         </div>
         <div className="col-span-1">
           <Controller
             control={control}
             name="data.invite_users"
-            render={({ field: { value, onChange } }) => (
-              <ToggleSwitch onChange={onChange} value={value} />
-            )}
+            render={({ field: { value, onChange } }) => <ToggleSwitch onChange={onChange} value={value} />}
           />
         </div>
       </div>
@@ -97,11 +84,7 @@ export const JiraImportUsers: FC = () => {
                         value={value}
                         onChange={onChange}
                         width="w-full"
-                        label={
-                          <span className="capitalize">
-                            {Boolean(value) ? value : ("Ignore" as any)}
-                          </span>
-                        }
+                        label={<span className="capitalize">{Boolean(value) ? value : ("Ignore" as any)}</span>}
                       >
                         <CustomSelect.Option value="invite">Invite by email</CustomSelect.Option>
                         <CustomSelect.Option value="map">Map to existing</CustomSelect.Option>
@@ -112,15 +95,24 @@ export const JiraImportUsers: FC = () => {
                 </div>
                 <div className="col-span-1">
                   {watch(`data.users.${index}.import`) === "invite" && (
-                    <Input
-                      id={`data.users.${index}.email`}
+                    <Controller
+                      control={control}
                       name={`data.users.${index}.email`}
-                      type="text"
-                      register={register}
-                      validations={{
+                      rules={{
                         required: "This field is required",
                       }}
-                      error={errors?.data?.users?.[index]?.email}
+                      render={({ field: { value, onChange, ref } }) => (
+                        <Input
+                          id={`data.users.${index}.email`}
+                          name={`data.users.${index}.email`}
+                          type="text"
+                          value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.data?.users?.[index]?.email)}
+                          className="w-full"
+                        />
+                      )}
                     />
                   )}
                   {watch(`data.users.${index}.import`) === "map" && (
diff --git a/web/components/integration/jira/jira-project-detail.tsx b/web/components/integration/jira/jira-project-detail.tsx
index f651ad89c..ac8eb3e90 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/integration/jira.service";
+import { JiraImporterService } from "services/integrations";
 
 // fetch keys
 import { JIRA_IMPORTER_DETAIL } from "constants/fetch-keys";
@@ -18,7 +18,7 @@ import { JIRA_IMPORTER_DETAIL } from "constants/fetch-keys";
 import { IJiraImporterForm, IJiraMetadata } from "types";
 
 // components
-import { Spinner, ToggleSwitch } from "components/ui";
+import { ToggleSwitch, Spinner } from "@plane/ui";
 
 import type { IJiraIntegrationData, TJiraIntegrationSteps } from ".";
 
@@ -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;
 
@@ -157,9 +160,7 @@ export const JiraProjectDetail: React.FC<Props> = (props) => {
           <Controller
             control={control}
             name="config.epics_to_modules"
-            render={({ field: { value, onChange } }) => (
-              <ToggleSwitch onChange={onChange} value={value} />
-            )}
+            render={({ field: { value, onChange } }) => <ToggleSwitch onChange={onChange} value={value} />}
           />
         </div>
       </div>
diff --git a/web/components/integration/jira/root.tsx b/web/components/integration/jira/root.tsx
index 451c23709..505785544 100644
--- a/web/components/integration/jira/root.tsx
+++ b/web/components/integration/jira/root.tsx
@@ -16,13 +16,13 @@ import { ArrowLeftIcon, ListBulletIcon } from "@heroicons/react/24/outline";
 import { CogIcon, UsersIcon, CheckIcon } from "components/icons";
 
 // services
-import jiraImporterService from "services/integration/jira.service";
+import { JiraImporterService } from "services/integrations";
 
 // fetch keys
 import { IMPORTER_SERVICES_LIST } from "constants/fetch-keys";
 
 // components
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 import {
   JiraGetImportDetail,
   JiraProjectDetail,
@@ -35,7 +35,7 @@ import {
 
 import JiraLogo from "public/services/jira.png";
 
-import { ICurrentUserResponse, IJiraImporterForm } from "types";
+import { IUser, IJiraImporterForm } from "types";
 
 const integrationWorkflowData: Array<{
   title: string;
@@ -65,9 +65,12 @@ const integrationWorkflowData: Array<{
 ];
 
 type Props = {
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+// services
+const jiraImporterService = new JiraImporterService();
+
 export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
   const [currentStep, setCurrentStep] = useState<IJiraIntegrationData>({
     state: "import-configure",
@@ -100,9 +103,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
   };
 
   const activeIntegrationState = () => {
-    const currentElementIndex = integrationWorkflowData.findIndex(
-      (i) => i?.key === currentStep?.state
-    );
+    const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
 
     return currentElementIndex;
   };
@@ -155,9 +156,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                   <div
                     key={index}
                     className={`border-b px-7 ${
-                      index <= activeIntegrationState() - 1
-                        ? `border-custom-primary`
-                        : `border-custom-border-200`
+                      index <= activeIntegrationState() - 1 ? `border-custom-primary` : `border-custom-border-200`
                     }`}
                   >
                     {" "}
@@ -174,10 +173,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
               <div className="h-full w-full overflow-y-auto">
                 {currentStep.state === "import-configure" && <JiraGetImportDetail />}
                 {currentStep.state === "display-import-data" && (
-                  <JiraProjectDetail
-                    setDisableTopBarAfter={setDisableTopBarAfter}
-                    setCurrentStep={setCurrentStep}
-                  />
+                  <JiraProjectDetail setDisableTopBarAfter={setDisableTopBarAfter} setCurrentStep={setCurrentStep} />
                 )}
                 {currentStep?.state === "import-users" && <JiraImportUsers />}
                 {currentStep?.state === "import-confirmation" && <JiraConfirmImport />}
@@ -185,7 +181,8 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
 
               <div className="-mx-4 mt-4 flex justify-end gap-4 border-t border-custom-border-200 p-4 pb-0">
                 {currentStep?.state !== "import-configure" && (
-                  <SecondaryButton
+                  <Button
+                    variant="neutral-primary"
                     onClick={() => {
                       const currentElementIndex = integrationWorkflowData.findIndex(
                         (i) => i?.key === currentStep?.state
@@ -196,18 +193,13 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                     }}
                   >
                     Back
-                  </SecondaryButton>
+                  </Button>
                 )}
-                <PrimaryButton
-                  disabled={
-                    disableTopBarAfter === currentStep?.state ||
-                    !isValid ||
-                    methods.formState.isSubmitting
-                  }
+                <Button
+                  variant="primary"
+                  disabled={disableTopBarAfter === currentStep?.state || !isValid || methods.formState.isSubmitting}
                   onClick={() => {
-                    const currentElementIndex = integrationWorkflowData.findIndex(
-                      (i) => i?.key === currentStep?.state
-                    );
+                    const currentElementIndex = integrationWorkflowData.findIndex((i) => i?.key === currentStep?.state);
 
                     if (currentElementIndex === integrationWorkflowData.length - 1) {
                       methods.handleSubmit(onSubmit)();
@@ -219,7 +211,7 @@ export const JiraImporterRoot: React.FC<Props> = ({ user }) => {
                   }}
                 >
                   {currentStep?.state === "import-confirmation" ? "Confirm & Import" : "Next"}
-                </PrimaryButton>
+                </Button>
               </div>
             </form>
           </FormProvider>
diff --git a/web/components/integration/single-integration-card.tsx b/web/components/integration/single-integration-card.tsx
index fab37b0c8..cf2b0c661 100644
--- a/web/components/integration/single-integration-card.tsx
+++ b/web/components/integration/single-integration-card.tsx
@@ -6,12 +6,12 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import IntegrationService from "services/integration";
+import { IntegrationService } from "services/integrations";
 // hooks
 import useToast from "hooks/use-toast";
 import useIntegrationPopup from "hooks/use-integration-popup";
 // ui
-import { DangerButton, Loader, PrimaryButton } from "components/ui";
+import { Button, Loader } from "@plane/ui";
 // icons
 import GithubLogo from "public/services/github.png";
 import SlackLogo from "public/services/slack.png";
@@ -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,25 +53,18 @@ 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 () => {
     if (!workspaceSlug || !integration || !workspaceIntegrations) return;
 
-    const workspaceIntegrationId = workspaceIntegrations?.find(
-      (i) => i.integration === integration.id
-    )?.id;
+    const workspaceIntegrationId = workspaceIntegrations?.find((i) => i.integration === integration.id)?.id;
 
     setDeletingIntegration(true);
 
-    await IntegrationService.deleteWorkspaceIntegration(
-      workspaceSlug as string,
-      workspaceIntegrationId ?? ""
-    )
+    await integrationService
+      .deleteWorkspaceIntegration(workspaceSlug as string, workspaceIntegrationId ?? "")
       .then(() => {
         mutate<IWorkspaceIntegration[]>(
           WORKSPACE_INTEGRATIONS(workspaceSlug as string),
@@ -94,18 +90,13 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
       });
   };
 
-  const isInstalled = workspaceIntegrations?.find(
-    (i: any) => i.integration_detail.id === integration.id
-  );
+  const isInstalled = workspaceIntegrations?.find((i: any) => i.integration_detail.id === integration.id);
 
   return (
     <div className="flex items-center justify-between gap-2 border-b border-custom-border-200 bg-custom-background-100 px-4 py-6">
       <div className="flex items-start gap-4">
         <div className="h-10 w-10 flex-shrink-0">
-          <Image
-            src={integrationDetails[integration.provider].logo}
-            alt={`${integration.title} Logo`}
-          />
+          <Image src={integrationDetails[integration.provider].logo} alt={`${integration.title} Logo`} />
         </div>
         <div>
           <h3 className="flex items-center gap-2 text-sm font-medium">
@@ -126,13 +117,13 @@ export const SingleIntegrationCard: React.FC<Props> = ({ integration }) => {
 
       {workspaceIntegrations ? (
         isInstalled ? (
-          <DangerButton onClick={handleRemoveIntegration} loading={deletingIntegration} outline>
+          <Button variant="danger" onClick={handleRemoveIntegration} loading={deletingIntegration}>
             {deletingIntegration ? "Uninstalling..." : "Uninstall"}
-          </DangerButton>
+          </Button>
         ) : (
-          <PrimaryButton onClick={startAuth} loading={isInstalling}>
+          <Button variant="primary" onClick={startAuth} loading={isInstalling}>
             {isInstalling ? "Installing..." : "Install"}
-          </PrimaryButton>
+          </Button>
         )
       ) : (
         <Loader>
diff --git a/web/components/integration/slack/select-channel.tsx b/web/components/integration/slack/select-channel.tsx
index 712c168df..fb5393f3a 100644
--- a/web/components/integration/slack/select-channel.tsx
+++ b/web/components/integration/slack/select-channel.tsx
@@ -1,14 +1,11 @@
-import React, { useState, useEffect } from "react";
-
+import { useState, useEffect } from "react";
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
 // services
-import appinstallationsService from "services/app-installations.service";
+import { AppInstallationService } from "services/app_installation.service";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // hooks
-import useToast from "hooks/use-toast";
 import useIntegrationPopup from "hooks/use-integration-popup";
 // types
 import { IWorkspaceIntegration, ISlackIntegration } from "types";
@@ -19,9 +16,10 @@ type Props = {
   integration: IWorkspaceIntegration;
 };
 
+const appInstallationService = new AppInstallationService();
+
 export const SelectChannel: React.FC<Props> = ({ integration }) => {
-  const [slackChannelAvailabilityToggle, setSlackChannelAvailabilityToggle] =
-    useState<boolean>(false);
+  const [slackChannelAvailabilityToggle, setSlackChannelAvailabilityToggle] = useState<boolean>(false);
   const [slackChannel, setSlackChannel] = useState<ISlackIntegration | null>(null);
 
   const router = useRouter();
@@ -35,7 +33,7 @@ export const SelectChannel: React.FC<Props> = ({ integration }) => {
       : null,
     () =>
       workspaceSlug && projectId && integration.id
-        ? appinstallationsService.getSlackChannelDetail(
+        ? appInstallationService.getSlackChannelDetail(
             workspaceSlug as string,
             projectId as string,
             integration.id as string
@@ -64,13 +62,8 @@ export const SelectChannel: React.FC<Props> = ({ integration }) => {
       setSlackChannelAvailabilityToggle(false);
       setSlackChannel(null);
     });
-    appinstallationsService
-      .removeSlackChannel(
-        workspaceSlug as string,
-        projectId as string,
-        integration.id as string,
-        slackChannel?.id
-      )
+    appInstallationService
+      .removeSlackChannel(workspaceSlug as string, projectId as string, integration.id as string, slackChannel?.id)
       .catch((err) => console.log(err));
   };
 
diff --git a/web/components/issues/activity.tsx b/web/components/issues/activity.tsx
index e6f54f512..6e12435cc 100644
--- a/web/components/issues/activity.tsx
+++ b/web/components/issues/activity.tsx
@@ -7,7 +7,8 @@ import { useRouter } from "next/router";
 import { ActivityIcon, ActivityMessage } from "components/core";
 import { CommentCard } from "components/issues/comment";
 // ui
-import { Icon, Loader, Tooltip } from "components/ui";
+import { Icon } from "components/ui";
+import { Loader, Tooltip } from "@plane/ui";
 // helpers
 import { render24HourFormatTime, renderLongDateFormat, timeAgo } from "helpers/date-time.helper";
 // types
@@ -52,11 +53,7 @@ export const IssueActivitySection: React.FC<Props> = ({
       <ul role="list" className="-mb-4">
         {activity.map((activityItem, index) => {
           // determines what type of action is performed
-          const message = activityItem.field ? (
-            <ActivityMessage activity={activityItem} />
-          ) : (
-            "created the issue."
-          );
+          const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : "created the issue.";
 
           if ("field" in activityItem && activityItem.field !== "updated_by") {
             return (
@@ -79,8 +76,7 @@ export const IssueActivitySection: React.FC<Props> = ({
                               ) : (
                                 <ActivityIcon activity={activityItem} />
                               )
-                            ) : activityItem.actor_detail.avatar &&
-                              activityItem.actor_detail.avatar !== "" ? (
+                            ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
                               <img
                                 src={activityItem.actor_detail.avatar}
                                 alt={activityItem.actor_detail.display_name}
@@ -103,13 +99,10 @@ export const IssueActivitySection: React.FC<Props> = ({
                     </div>
                     <div className="min-w-0 flex-1 py-3">
                       <div className="text-xs text-custom-text-200 break-words">
-                        {activityItem.field === "archived_at" &&
-                        activityItem.new_value !== "restore" ? (
+                        {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                           <span className="text-gray font-medium">Plane</span>
                         ) : activityItem.actor_detail.is_bot ? (
-                          <span className="text-gray font-medium">
-                            {activityItem.actor_detail.first_name} Bot
-                          </span>
+                          <span className="text-gray font-medium">{activityItem.actor_detail.first_name} Bot</span>
                         ) : (
                           <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
                             <a className="text-gray font-medium">
@@ -121,13 +114,11 @@ export const IssueActivitySection: React.FC<Props> = ({
                         )}{" "}
                         {message}{" "}
                         <Tooltip
-                          tooltipContent={`${renderLongDateFormat(
+                          tooltipContent={`${renderLongDateFormat(activityItem.created_at)}, ${render24HourFormatTime(
                             activityItem.created_at
-                          )}, ${render24HourFormatTime(activityItem.created_at)}`}
+                          )}`}
                         >
-                          <span className="whitespace-nowrap">
-                            {timeAgo(activityItem.created_at)}
-                          </span>
+                          <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
                         </Tooltip>
                       </div>
                     </div>
diff --git a/web/components/issues/attachment/attachment-upload.tsx b/web/components/issues/attachment/attachment-upload.tsx
index be75f703b..9f8b84479 100644
--- a/web/components/issues/attachment/attachment-upload.tsx
+++ b/web/components/issues/attachment/attachment-upload.tsx
@@ -1,13 +1,9 @@
-import React, { useCallback, useState } from "react";
-
+import { useCallback, useState } from "react";
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-dropzone
 import { useDropzone } from "react-dropzone";
 // services
-import issuesService from "services/issues.service";
+import { IssueAttachmentService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 // types
@@ -21,6 +17,8 @@ type Props = {
   disabled?: boolean;
 };
 
+const issueAttachmentService = new IssueAttachmentService();
+
 export const IssueAttachmentUpload: React.FC<Props> = ({ disabled = false }) => {
   const [isLoading, setIsLoading] = useState(false);
 
@@ -43,13 +41,8 @@ export const IssueAttachmentUpload: React.FC<Props> = ({ disabled = false }) =>
     );
     setIsLoading(true);
 
-    issuesService
-      .uploadIssueAttachment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        formData
-      )
+    issueAttachmentService
+      .uploadIssueAttachment(workspaceSlug as string, projectId as string, issueId as string, formData)
       .then((res) => {
         mutate<IIssueAttachment[]>(
           ISSUE_ATTACHMENTS(issueId as string),
@@ -64,7 +57,7 @@ export const IssueAttachmentUpload: React.FC<Props> = ({ disabled = false }) =>
         });
         setIsLoading(false);
       })
-      .catch((err) => {
+      .catch(() => {
         setIsLoading(false);
         setToastAlert({
           type: "error",
@@ -83,9 +76,7 @@ export const IssueAttachmentUpload: React.FC<Props> = ({ disabled = false }) =>
   });
 
   const fileError =
-    fileRejections.length > 0
-      ? `Invalid file type or size (max ${maxFileSize / 1024 / 1024} MB)`
-      : null;
+    fileRejections.length > 0 ? `Invalid file type or size (max ${maxFileSize / 1024 / 1024} MB)` : null;
 
   return (
     <div
diff --git a/web/components/issues/attachment/attachments.tsx b/web/components/issues/attachment/attachments.tsx
index 4ec598d1a..afa5441ee 100644
--- a/web/components/issues/attachment/attachments.tsx
+++ b/web/components/issues/attachment/attachments.tsx
@@ -6,14 +6,14 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 import { DeleteAttachmentModal } from "./delete-attachment-modal";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { ExclamationIcon, getFileIcon } from "components/icons";
 // services
-import issuesService from "services/issues.service";
-import projectService from "services/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,12 +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
   );
 
@@ -70,14 +69,11 @@ export const IssueAttachments = () => {
                   <div className="flex flex-col gap-1">
                     <div className="flex items-center gap-2">
                       <Tooltip tooltipContent={getFileName(file.attributes.name)}>
-                        <span className="text-sm">
-                          {truncateText(`${getFileName(file.attributes.name)}`, 10)}
-                        </span>
+                        <span className="text-sm">{truncateText(`${getFileName(file.attributes.name)}`, 10)}</span>
                       </Tooltip>
                       <Tooltip
                         tooltipContent={`${
-                          people?.find((person) => person.member.id === file.updated_by)?.member
-                            .display_name ?? ""
+                          people?.find((person) => person.member.id === file.updated_by)?.member.display_name ?? ""
                         } uploaded on ${renderLongDateFormat(file.updated_at)}`}
                       >
                         <span>
diff --git a/web/components/issues/attachment/delete-attachment-modal.tsx b/web/components/issues/attachment/delete-attachment-modal.tsx
index 7c0495dd6..863318835 100644
--- a/web/components/issues/attachment/delete-attachment-modal.tsx
+++ b/web/components/issues/attachment/delete-attachment-modal.tsx
@@ -7,11 +7,11 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issues.service";
+import { IssueAttachmentService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // helper
@@ -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,13 +49,8 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
       false
     );
 
-    await issuesService
-      .deleteIssueAttachment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        assetId as string
-      )
+    await issueAttachmentService
+      .deleteIssueAttachment(workspaceSlug as string, projectId as string, issueId as string, assetId as string)
       .then(() => mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)))
       .catch(() => {
         setToastAlert({
@@ -94,39 +92,35 @@ export const DeleteAttachmentModal: React.FC<Props> = ({ isOpen, setIsOpen, data
                   <div className="bg-custom-background-80 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-100 sm:mx-0 sm:h-10 sm:w-10">
-                        <ExclamationTriangleIcon
-                          className="h-6 w-6 text-red-600"
-                          aria-hidden="true"
-                        />
+                        <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"
-                        >
+                        <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                           Delete Attachment
                         </Dialog.Title>
                         <div className="mt-2">
                           <p className="text-sm text-custom-text-200">
                             Are you sure you want to delete attachment-{" "}
-                            <span className="font-bold">{getFileName(data.attributes.name)}</span>?
-                            This attachment will be permanently removed. This action cannot be
-                            undone.
+                            <span className="font-bold">{getFileName(data.attributes.name)}</span>? This attachment will
+                            be permanently removed. This action cannot be undone.
                           </p>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div className="flex justify-end gap-2 bg-custom-background-90 p-4 sm:px-6">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button
+                      variant="danger"
                       onClick={() => {
                         handleDeletion(data.id);
                         handleClose();
                       }}
                     >
                       Delete
-                    </DangerButton>
+                    </Button>
                   </div>
                 </Dialog.Panel>
               </Transition.Child>
diff --git a/web/components/issues/comment/add-comment.tsx b/web/components/issues/comment/add-comment.tsx
index b5d91adee..87d391f01 100644
--- a/web/components/issues/comment/add-comment.tsx
+++ b/web/components/issues/comment/add-comment.tsx
@@ -1,15 +1,16 @@
 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
-import { SecondaryButton } from "components/ui";
+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",
@@ -26,7 +27,7 @@ type commentAccessType = {
   icon: string;
   key: string;
   label: "Private" | "Public";
-}
+};
 const commentAccess: commentAccessType[] = [
   {
     icon: "lock",
@@ -40,11 +41,10 @@ const commentAccess: commentAccessType[] = [
   },
 ];
 
-export const AddComment: React.FC<Props> = ({
-  disabled = false,
-  onSubmit,
-  showAccessSpecifier = false,
-}) => {
+// services
+const fileService = new FileService();
+
+export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit, showAccessSpecifier = false }) => {
   const editorRef = React.useRef<any>(null);
 
   const router = useRouter();
@@ -71,6 +71,36 @@ export const AddComment: React.FC<Props> = ({
       <form onSubmit={handleSubmit(handleAddComment)}>
         <div>
           <div className="relative">
+            {showAccessSpecifier && (
+              <div className="absolute bottom-2 left-3 z-[1]">
+                <Controller
+                  control={control}
+                  name="access"
+                  render={({ field: { onChange, value } }) => (
+                    <div className="flex border border-custom-border-300 divide-x divide-custom-border-300 rounded overflow-hidden">
+                      {commentAccess.map((access) => (
+                        <Tooltip key={access.key} tooltipContent={access.label}>
+                          <button
+                            type="button"
+                            onClick={() => onChange(access.key)}
+                            className={`grid place-items-center p-1 hover:bg-custom-background-80 ${
+                              value === access.key ? "bg-custom-background-80" : ""
+                            }`}
+                          >
+                            <Icon
+                              iconName={access.icon}
+                              className={`w-4 h-4 -mt-1 ${
+                                value === access.key ? "!text-custom-text-100" : "!text-custom-text-400"
+                              }`}
+                            />
+                          </button>
+                        </Tooltip>
+                      ))}
+                    </div>
+                  )}
+                />
+              </div>
+            )}
             <Controller
               name="access"
               control={control}
@@ -96,9 +126,9 @@ export const AddComment: React.FC<Props> = ({
             />
           </div>
 
-          <SecondaryButton type="submit" disabled={isSubmitting || disabled} className="mt-2">
+          <Button variant="neutral-primary" type="submit" disabled={isSubmitting || disabled}>
             {isSubmitting ? "Adding..." : "Comment"}
-          </SecondaryButton>
+          </Button>
         </div>
       </form>
     </div>
diff --git a/web/components/issues/comment/comment-card.tsx b/web/components/issues/comment/comment-card.tsx
index 7e169a2d5..180722382 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/comment/comment-reaction.tsx b/web/components/issues/comment/comment-reaction.tsx
index d84e2b9ff..fe95f8e58 100644
--- a/web/components/issues/comment/comment-reaction.tsx
+++ b/web/components/issues/comment/comment-reaction.tsx
@@ -1,7 +1,5 @@
-import React from "react";
-
+import { FC } from "react";
 import { useRouter } from "next/router";
-
 // hooks
 import useUser from "hooks/use-user";
 import useCommentReaction from "hooks/use-comment-reaction";
@@ -9,6 +7,7 @@ import useCommentReaction from "hooks/use-comment-reaction";
 import { ReactionSelector } from "components/core";
 // helper
 import { renderEmoji } from "helpers/emoji.helper";
+import { IssueCommentReaction } from "types";
 
 type Props = {
   projectId?: string | string[];
@@ -16,7 +15,7 @@ type Props = {
   readonly?: boolean;
 };
 
-export const CommentReaction: React.FC<Props> = (props) => {
+export const CommentReaction: FC<Props> = (props) => {
   const { projectId, commentId, readonly = false } = props;
 
   const router = useRouter();
@@ -24,19 +23,17 @@ export const CommentReaction: React.FC<Props> = (props) => {
 
   const { user } = useUser();
 
-  const {
-    commentReactions,
-    groupedReactions,
-    handleReactionCreate,
-    handleReactionDelete,
-    isLoading,
-  } = useCommentReaction(workspaceSlug, projectId, commentId);
+  const { commentReactions, groupedReactions, handleReactionCreate, handleReactionDelete } = useCommentReaction(
+    workspaceSlug,
+    projectId,
+    commentId
+  );
 
   const handleReactionClick = (reaction: string) => {
     if (!workspaceSlug || !projectId || !commentId) return;
 
     const isSelected = commentReactions?.some(
-      (r) => r.actor === user?.id && r.reaction === reaction
+      (r: IssueCommentReaction) => r.actor === user?.id && r.reaction === reaction
     );
 
     if (isSelected) {
@@ -54,8 +51,8 @@ export const CommentReaction: React.FC<Props> = (props) => {
           position="top"
           value={
             commentReactions
-              ?.filter((reaction) => reaction.actor === user?.id)
-              .map((r) => r.reaction) || []
+              ?.filter((reaction: IssueCommentReaction) => reaction.actor === user?.id)
+              .map((r: IssueCommentReaction) => r.reaction) || []
           }
           onSelect={handleReactionClick}
         />
@@ -73,7 +70,7 @@ export const CommentReaction: React.FC<Props> = (props) => {
               }}
               key={reaction}
               className={`flex items-center gap-1 text-custom-text-100 text-sm h-full px-2 py-1 rounded-md ${
-                commentReactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                commentReactions?.some((r: IssueCommentReaction) => r.actor === user?.id && r.reaction === reaction)
                   ? "bg-custom-primary-100/10"
                   : "bg-custom-background-80"
               }`}
@@ -81,7 +78,7 @@ export const CommentReaction: React.FC<Props> = (props) => {
               <span>{renderEmoji(reaction)}</span>
               <span
                 className={
-                  commentReactions?.some((r) => r.actor === user?.id && r.reaction === reaction)
+                  commentReactions?.some((r: IssueCommentReaction) => r.actor === user?.id && r.reaction === reaction)
                     ? "text-custom-primary-100"
                     : ""
                 }
diff --git a/web/components/issues/confirm-issue-discard.tsx b/web/components/issues/confirm-issue-discard.tsx
index f8feab73d..98b4eaf48 100644
--- a/web/components/issues/confirm-issue-discard.tsx
+++ b/web/components/issues/confirm-issue-discard.tsx
@@ -3,7 +3,7 @@ import React, { useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import { SecondaryButton, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -58,29 +58,28 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
                 <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                   <div className="sm:flex sm:items-start">
                     <div className="mt-3 text-center sm:mt-0 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium leading-6 text-custom-text-100"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Draft Issue
                       </Dialog.Title>
                       <div className="mt-2">
-                        <p className="text-sm text-custom-text-200">
-                          Would you like to save this issue in drafts?
-                        </p>
+                        <p className="text-sm text-custom-text-200">Would you like to save this issue in drafts?</p>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div className="flex justify-between gap-2 p-4 sm:px-6">
                   <div>
-                    <SecondaryButton onClick={onDiscard}>Discard</SecondaryButton>
+                    <Button variant="neutral-primary" onClick={onDiscard}>
+                      Discard
+                    </Button>
                   </div>
                   <div className="space-x-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton onClick={handleDeletion} loading={isLoading}>
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" onClick={handleDeletion} loading={isLoading}>
                       {isLoading ? "Saving..." : "Save Draft"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/issues/delete-draft-issue-modal.tsx b/web/components/issues/delete-draft-issue-modal.tsx
index 8347f555b..d1c8ec9b5 100644
--- a/web/components/issues/delete-draft-issue-modal.tsx
+++ b/web/components/issues/delete-draft-issue-modal.tsx
@@ -9,14 +9,14 @@ import useUser from "hooks/use-user";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import issueServices from "services/issues.service";
+import { IssueDraftService } from "services/issue";
 // hooks
 import useIssuesView from "hooks/use-issues-view";
 import useToast from "hooks/use-toast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IIssue } from "types";
 // fetch-keys
@@ -29,6 +29,8 @@ type Props = {
   onSubmit?: () => Promise<void> | void;
 };
 
+const issueDraftService = new IssueDraftService();
+
 export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
   const { isOpen, handleClose, data, onSubmit } = props;
 
@@ -57,8 +59,8 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
 
     setIsDeleteLoading(true);
 
-    await issueServices
-      .deleteDraftIssue(workspaceSlug as string, data.project, data.id, user)
+    await issueDraftService
+      .deleteDraftIssue(workspaceSlug as string, data.project, data.id)
       .then(() => {
         setIsDeleteLoading(false);
         handleClose();
@@ -112,10 +114,7 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Draft Issue</h3>
@@ -127,15 +126,17 @@ export const DeleteDraftIssueModal: React.FC<Props> = (props) => {
                       <span className="break-words font-medium text-custom-text-100">
                         {data?.project_detail.identifier}-{data?.sequence_id}
                       </span>
-                      {""}? All of the data related to the draft issue will be permanently removed.
-                      This action cannot be undone.
+                      {""}? All of the data related to the draft issue will be permanently removed. This action cannot
+                      be undone.
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                       {isDeleteLoading ? "Deleting..." : "Delete Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/issues/delete-issue-modal.tsx b/web/components/issues/delete-issue-modal.tsx
index 62fc04723..37990c327 100644
--- a/web/components/issues/delete-issue-modal.tsx
+++ b/web/components/issues/delete-issue-modal.tsx
@@ -1,24 +1,18 @@
-import React, { useEffect, useState } from "react";
-
+import { useEffect, useState, Fragment } from "react";
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import issueServices from "services/issues.service";
+import { IssueService, IssueArchiveService } from "services/issue";
 // hooks
 import useIssuesView from "hooks/use-issues-view";
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 import useToast from "hooks/use-toast";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
-import type { IIssue, ICurrentUserResponse, ISubIssueResponse } from "types";
+import type { IIssue, IUser, ISubIssueResponse } from "types";
 // fetch-keys
 import {
   CYCLE_ISSUES_WITH_PARAMS,
@@ -26,18 +20,20 @@ import {
   PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS,
   PROJECT_ISSUES_LIST_WITH_PARAMS,
   SUB_ISSUES,
-  VIEW_ISSUES,
 } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data: IIssue | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   onSubmit?: () => Promise<void>;
   redirection?: boolean;
 };
 
+const issueService = new IssueService();
+const issueArchiveService = new IssueArchiveService();
+
 export const DeleteIssueModal: React.FC<Props> = ({
   isOpen,
   handleClose,
@@ -49,12 +45,10 @@ export const DeleteIssueModal: React.FC<Props> = ({
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, issueId } = router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, issueId } = router.query;
   const isArchivedIssues = router.pathname.includes("archived-issues");
 
   const { displayFilters, params } = useIssuesView();
-  const { params: calendarParams } = useCalendarIssuesView();
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
 
   const { setToastAlert } = useToast();
 
@@ -72,31 +66,10 @@ export const DeleteIssueModal: React.FC<Props> = ({
 
     setIsDeleteLoading(true);
 
-    await issueServices
+    await issueService
       .deleteIssue(workspaceSlug as string, data.project, data.id, user)
       .then(() => {
-        if (displayFilters.layout === "calendar") {
-          const calendarFetchKey = cycleId
-            ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
-            : moduleId
-            ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
-            : viewId
-            ? VIEW_ISSUES(viewId.toString(), calendarParams)
-            : PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, calendarParams);
-
-          mutate<IIssue[]>(
-            calendarFetchKey,
-            (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
-            false
-          );
-        } else if (displayFilters.layout === "spreadsheet") {
-          const spreadsheetFetchKey = cycleId
-            ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
-            : moduleId
-            ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
-            : viewId
-            ? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
-            : PROJECT_ISSUES_LIST_WITH_PARAMS(data.project, spreadsheetParams);
+        if (displayFilters.layout === "spreadsheet") {
           if (data.parent) {
             mutate<ISubIssueResponse>(
               SUB_ISSUES(data.parent.toString()),
@@ -111,13 +84,6 @@ export const DeleteIssueModal: React.FC<Props> = ({
               },
               false
             );
-            mutate<IIssue[]>(spreadsheetFetchKey);
-          } else {
-            mutate<IIssue[]>(
-              spreadsheetFetchKey,
-              (prevData) => (prevData ?? []).filter((p) => p.id !== data.id),
-              false
-            );
           }
         } else {
           if (cycleId) mutate(CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params));
@@ -136,8 +102,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
 
         if (issueId && redirection) router.back();
       })
-      .catch((error) => {
-        console.log(error);
+      .catch(() => {
         setIsDeleteLoading(false);
       });
     if (onSubmit) await onSubmit();
@@ -147,7 +112,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
     setIsDeleteLoading(true);
     if (!workspaceSlug || !projectId || !data) return;
 
-    await issueServices
+    await issueArchiveService
       .deleteArchivedIssue(workspaceSlug as string, projectId as string, data.id)
       .then(() => {
         mutate(PROJECT_ARCHIVED_ISSUES_LIST_WITH_PARAMS(projectId as string, params));
@@ -165,14 +130,13 @@ export const DeleteIssueModal: React.FC<Props> = ({
       });
   };
 
-  const handleIssueDelete = () =>
-    isArchivedIssues ? handleArchivedIssueDeletion() : handleDeletion();
+  const handleIssueDelete = () => (isArchivedIssues ? handleArchivedIssueDeletion() : handleDeletion());
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={onClose}>
         <Transition.Child
-          as={React.Fragment}
+          as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -186,7 +150,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
         <div className="fixed inset-0 z-10 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}
+              as={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"
@@ -198,10 +162,7 @@ export const DeleteIssueModal: React.FC<Props> = ({
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Issue</h3>
@@ -213,15 +174,17 @@ export const DeleteIssueModal: React.FC<Props> = ({
                       <span className="break-words font-medium text-custom-text-100">
                         {data?.project_detail.identifier}-{data?.sequence_id}
                       </span>
-                      {""}? All of the data related to the issue will be permanently removed. This
-                      action cannot be undone.
+                      {""}? All of the data related to the issue will be permanently removed. This action cannot be
+                      undone.
                     </p>
                   </span>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <DangerButton onClick={handleIssueDelete} loading={isDeleteLoading}>
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" onClick={handleIssueDelete} loading={isDeleteLoading}>
                       {isDeleteLoading ? "Deleting..." : "Delete Issue"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </div>
               </Dialog.Panel>
diff --git a/web/components/issues/description-form.tsx b/web/components/issues/description-form.tsx
index 8596d5fe8..feb63c671 100644
--- a/web/components/issues/description-form.tsx
+++ b/web/components/issues/description-form.tsx
@@ -1,16 +1,15 @@
-import { FC, useCallback, useEffect, useState } from "react";
-
-// react-hook-form
+import { ChangeEvent, FC, useCallback, useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 // hooks
 import useReloadConfirmations from "hooks/use-reload-confirmation";
 import { useDebouncedCallback } from "use-debounce";
 // components
-import { TextArea } from "components/ui";
+import { TextArea } from "@plane/ui";
+import { RichTextEditor } from "@plane/rich-text-editor";
 // types
 import { IIssue } from "types";
-import { RichTextEditor } from "@plane/rich-text-editor";
-import fileService from "services/file.service";
+// services
+import { FileService } from "services/file.service";
 
 export interface IssueDescriptionFormValues {
   name: string;
@@ -27,12 +26,11 @@ export interface IssueDetailsProps {
   isAllowed: boolean;
 }
 
-export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
-  issue,
-  handleFormSubmit,
-  workspaceSlug,
-  isAllowed,
-}) => {
+const fileService = new FileService();
+
+export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
+  const { issue, handleFormSubmit, workspaceSlug, isAllowed } = props;
+  // states
   const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
   const [characterLimit, setCharacterLimit] = useState(false);
 
@@ -42,7 +40,6 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     handleSubmit,
     watch,
     reset,
-    register,
     control,
     formState: { errors },
   } = useForm<IIssue>({
@@ -92,31 +89,36 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
     <div className="relative">
       <div className="relative">
         {isAllowed ? (
-          <TextArea
-            id="name"
+          <Controller
             name="name"
-            placeholder="Enter issue name"
-            register={register}
-            onFocus={() => setCharacterLimit(true)}
-            onChange={() => {
-              setCharacterLimit(false);
-              setIsSubmitting("submitting");
-              debouncedTitleSave();
-            }}
-            required={true}
-            className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
-            role="textbox"
-            disabled={!isAllowed}
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <TextArea
+                id="name"
+                name="name"
+                value={value}
+                placeholder="Enter issue name"
+                onFocus={() => setCharacterLimit(true)}
+                onChange={(e: ChangeEvent<HTMLTextAreaElement>) => {
+                  setCharacterLimit(false);
+                  setIsSubmitting("submitting");
+                  debouncedTitleSave();
+                  onChange(e.target.value);
+                }}
+                required={true}
+                className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
+                hasError={Boolean(errors?.description)}
+                role="textbox"
+                disabled={!isAllowed}
+              />
+            )}
           />
         ) : (
           <h4 className="break-words text-2xl font-semibold">{issue.name}</h4>
         )}
         {characterLimit && isAllowed && (
           <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
-            <span
-              className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
-                }`}
-            >
+            <span className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""}`}>
               {watch("name").length}
             </span>
             /255
@@ -129,27 +131,28 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = ({
           name="description_html"
           control={control}
           render={({ field: { value, onChange } }) => (
-              <RichTextEditor
-                  uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
-                  deleteFile={fileService.deleteImage}
-                  value={value}
-                  debouncedUpdatesEnabled={true}
-                  setShouldShowAlert={setShowAlert}
-                  setIsSubmitting={setIsSubmitting}
-                  customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
-                  noBorder={!isAllowed}
-                  onChange={(description: Object, description_html: string) => {
-                      setShowAlert(true);
-                      setIsSubmitting("submitting");
-                      onChange(description_html);
-                      handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted")
-                      );
-                  } } />
+            <RichTextEditor
+              uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
+              deleteFile={fileService.deleteImage}
+              value={value}
+              debouncedUpdatesEnabled={true}
+              setShouldShowAlert={setShowAlert}
+              setIsSubmitting={setIsSubmitting}
+              customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
+              noBorder={!isAllowed}
+              onChange={(description: Object, description_html: string) => {
+                setShowAlert(true);
+                setIsSubmitting("submitting");
+                onChange(description_html);
+                handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
+              }}
+            />
           )}
         />
         <div
-          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${isSubmitting === "saved" ? "fadeOut" : "fadeIn"
-            }`}
+          className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${
+            isSubmitting === "saved" ? "fadeOut" : "fadeIn"
+          }`}
         >
           {isSubmitting === "submitting" ? "Saving..." : "Saved"}
         </div>
diff --git a/web/components/issues/draft-issue-form.tsx b/web/components/issues/draft-issue-form.tsx
index aa89a9f5d..538f846cf 100644
--- a/web/components/issues/draft-issue-form.tsx
+++ b/web/components/issues/draft-issue-form.tsx
@@ -1,11 +1,9 @@
 import React, { FC, useState, useEffect, useRef } from "react";
-
 import { useRouter } from "next/router";
-
-// react-hook-form
 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";
 import useLocalStorage from "hooks/use-local-storage";
@@ -24,15 +22,17 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
-// components
-import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+import { CustomMenu } from "components/ui";
+import { Button, Input, ToggleSwitch } from "@plane/ui";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
-import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
-import fileService from "services/file.service";
-// services
+import type { IUser, IIssue, ISearchIssueResponse } from "types";
+// components
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
+
+const aiService = new AIService();
+const fileService = new FileService();
 
 const defaultValues: Partial<IIssue> = {
   project: "",
@@ -73,7 +73,7 @@ interface IssueFormProps {
   handleClose: () => void;
   handleDiscard: () => void;
   status: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   fieldsToShow: (
     | "project"
     | "name"
@@ -100,7 +100,6 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
     setActiveProject,
     createMore,
     setCreateMore,
-    handleClose,
     status,
     user,
     fieldsToShow,
@@ -125,7 +124,6 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
   const { setToastAlert } = useToast();
 
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     reset,
@@ -168,9 +166,24 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [JSON.stringify(payload), isOpen, data]);
 
-  const onClose = () => {
-    handleClose();
-  };
+  // const onClose = () => {
+  //   handleClose();
+  // };
+
+  useEffect(() => {
+    if (!isOpen || data) return;
+
+    setLocalStorageValue(
+      JSON.stringify({
+        ...payload,
+      })
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(payload), isOpen, data]);
+
+  // const onClose = () => {
+  //   handleClose();
+  // };
 
   const handleCreateUpdateIssue = async (
     formData: Partial<IIssue>,
@@ -243,9 +256,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
           setToastAlert({
             type: "error",
             title: "Error!",
-            message:
-              error ||
-              "You have reached the maximum number of requests of 50 requests per month per user.",
+            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
           });
         else
           setToastAlert({
@@ -346,9 +357,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                   <span className="flex-shrink-0 text-custom-text-200">
                     {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
                   </span>
-                  <span className="truncate font-medium">
-                    {selectedParentIssue.name.substring(0, 50)}
-                  </span>
+                  <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
                   <XMarkIcon
                     className="h-3 w-3 cursor-pointer"
                     onClick={() => {
@@ -363,21 +372,29 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
             <div className="mt-2 space-y-3">
               {(fieldsToShow.includes("all") || fieldsToShow.includes("name")) && (
                 <div>
-                  <Input
-                    id="name"
+                  <Controller
+                    control={control}
                     name="name"
-                    className="resize-none text-xl"
-                    placeholder="Title"
-                    autoComplete="off"
-                    error={errors.name}
-                    register={register}
-                    validations={{
+                    rules={{
                       required: "Title is required",
                       maxLength: {
                         value: 255,
                         message: "Title should be less than 255 characters",
                       },
                     }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="name"
+                        name="name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.name)}
+                        placeholder="Title"
+                        className="resize-none text-xl w-full"
+                      />
+                    )}
                   />
                 </div>
               )}
@@ -415,21 +432,22 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                     name="description_html"
                     control={control}
                     render={({ field: { value, onChange } }) => (
-                        <RichTextEditorWithRef
-                            uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
-                            deleteFile={fileService.deleteImage}
-                            ref={editorRef}
-                            debouncedUpdatesEnabled={false}
-                            value={!value ||
-                                value === "" ||
-                                (typeof value === "object" && Object.keys(value).length === 0)
-                                ? watch("description_html")
-                                : value}
-                            customClassName="min-h-[150px]"
-                            onChange={(description: Object, description_html: string) => {
-                                onChange(description_html);
-                                setValue("description", description);
-                            } } />
+                      <RichTextEditorWithRef
+                        uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                        deleteFile={fileService.deleteImage}
+                        ref={editorRef}
+                        debouncedUpdatesEnabled={false}
+                        value={
+                          !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                            ? watch("description_html")
+                            : value
+                        }
+                        customClassName="min-h-[150px]"
+                        onChange={(description: Object, description_html: string) => {
+                          onChange(description_html);
+                          setValue("description", description);
+                        }}
+                      />
                     )}
                   />
                   <GptAssistantModal
@@ -478,11 +496,7 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                     control={control}
                     name="assignees"
                     render={({ field: { value, onChange } }) => (
-                      <IssueAssigneeSelect
-                        projectId={projectId}
-                        value={value}
-                        onChange={onChange}
-                      />
+                      <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
                     )}
                   />
                 )}
@@ -564,24 +578,15 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
                   <CustomMenu ellipsis>
                     {watch("parent") ? (
                       <>
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          onClick={() => setParentIssueListModalOpen(true)}
-                        >
+                        <CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
                           Change parent issue
                         </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          onClick={() => setValue("parent", null)}
-                        >
+                        <CustomMenu.MenuItem renderAs="button" onClick={() => setValue("parent", null)}>
                           Remove parent issue
                         </CustomMenu.MenuItem>
                       </>
                     ) : (
-                      <CustomMenu.MenuItem
-                        renderAs="button"
-                        onClick={() => setParentIssueListModalOpen(true)}
-                      >
+                      <CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
                         Select Parent Issue
                       </CustomMenu.MenuItem>
                     )}
@@ -600,23 +605,27 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
             <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
           </div>
           <div className="flex items-center gap-2">
-            <SecondaryButton onClick={handleDiscard}>Discard</SecondaryButton>
-            <SecondaryButton
+            <Button variant="neutral-primary" onClick={handleDiscard}>
+              Discard
+            </Button>
+            <Button
+              variant="neutral-primary"
               loading={isSubmitting}
               onClick={handleSubmit((formData) =>
                 handleCreateUpdateIssue(formData, data?.id ? "updateDraft" : "createDraft")
               )}
             >
               {isSubmitting ? "Saving..." : "Save Draft"}
-            </SecondaryButton>
-            <PrimaryButton
+            </Button>
+            <Button
               loading={isSubmitting}
+              variant="primary"
               onClick={handleSubmit((formData) =>
                 handleCreateUpdateIssue(formData, data ? "convertToNewIssue" : "createNewIssue")
               )}
             >
               {isSubmitting ? "Saving..." : "Add Issue"}
-            </PrimaryButton>
+            </Button>
           </div>
         </div>
       </form>
diff --git a/web/components/issues/draft-issue-modal.tsx b/web/components/issues/draft-issue-modal.tsx
index ca37ae03f..c59d69fcd 100644
--- a/web/components/issues/draft-issue-modal.tsx
+++ b/web/components/issues/draft-issue-modal.tsx
@@ -7,13 +7,12 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issues.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";
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 import useToast from "hooks/use-toast";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 import useLocalStorage from "hooks/use-local-storage";
 import useProjects from "hooks/use-projects";
 import useMyIssues from "hooks/my-issues/use-my-issues";
@@ -34,7 +33,6 @@ import {
   CYCLE_DETAILS,
   MODULE_DETAILS,
 } from "constants/fetch-keys";
-import modulesService from "services/modules.service";
 
 interface IssuesModalProps {
   data?: IIssue | null;
@@ -59,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,
@@ -79,9 +82,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
   const { displayFilters, params } = useIssuesView();
-  const { params: calendarParams } = useCalendarIssuesView();
   const { ...viewGanttParams } = params;
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
 
   const { user } = useUser();
   const { projects } = useProjects();
@@ -131,6 +132,35 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
     }
   }, [prePopulateDataProps, cycleId, moduleId, router.asPath, user?.id]);
 
+  useEffect(() => {
+    setPreloadedData(prePopulateDataProps ?? {});
+
+    if (cycleId && !prePopulateDataProps?.cycle) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        cycle: cycleId.toString(),
+      }));
+    }
+    if (moduleId && !prePopulateDataProps?.module) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        module: moduleId.toString(),
+      }));
+    }
+    if (
+      (router.asPath.includes("my-issues") || router.asPath.includes("assigned")) &&
+      !prePopulateDataProps?.assignees
+    ) {
+      setPreloadedData((prevData) => ({
+        ...(prevData ?? {}),
+        ...prePopulateDataProps,
+        assignees: prePopulateDataProps?.assignees ?? [user?.id ?? ""],
+      }));
+    }
+  }, [prePopulateDataProps, cycleId, moduleId, router.asPath, user?.id]);
+
   useEffect(() => {
     // if modal is closed, reset active project to null
     // and return to avoid activeProject being set to some other project
@@ -143,11 +173,9 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
     // issue. This has more priority than the project in the url.
     if (data && data.project) return setActiveProject(data.project);
 
-    if (prePopulateData && prePopulateData.project && !activeProject)
-      return setActiveProject(prePopulateData.project);
+    if (prePopulateData && prePopulateData.project && !activeProject) return setActiveProject(prePopulateData.project);
 
-    if (prePopulateData && prePopulateData.project && !activeProject)
-      return setActiveProject(prePopulateData.project);
+    if (prePopulateData && prePopulateData.project && !activeProject) return setActiveProject(prePopulateData.project);
 
     // if data is not present, set active project to the project
     // in the url. This has the least priority.
@@ -155,22 +183,6 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
       setActiveProject(projects?.find((p) => p.id === projectId)?.id ?? projects?.[0].id ?? null);
   }, [activeProject, data, projectId, projects, isOpen, prePopulateData]);
 
-  const calendarFetchKey = cycleId
-    ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
-    : moduleId
-    ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
-    : viewId
-    ? VIEW_ISSUES(viewId.toString(), calendarParams)
-    : PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", calendarParams);
-
-  const spreadsheetFetchKey = cycleId
-    ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
-    : moduleId
-    ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
-    : viewId
-    ? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
-    : PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", spreadsheetParams);
-
   const ganttFetchKey = cycleId
     ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
     : moduleId
@@ -182,8 +194,8 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   const createDraftIssue = async (payload: Partial<IIssue>) => {
     if (!workspaceSlug || !activeProject || !user) return;
 
-    await issuesService
-      .createDraftIssue(workspaceSlug as string, activeProject ?? "", payload, user)
+    await issueDraftService
+      .createDraftIssue(workspaceSlug as string, activeProject ?? "", payload)
       .then(async () => {
         mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
 
@@ -212,14 +224,12 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
   const updateDraftIssue = async (payload: Partial<IIssue>) => {
     if (!user) return;
 
-    await issuesService
-      .updateDraftIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload, user)
+    await issueDraftService
+      .updateDraftIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload)
       .then((res) => {
         if (isUpdatingSingleIssue) {
           mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
         } else {
-          if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
-          if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
           if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
           mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
           mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
@@ -250,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 ?? "",
@@ -271,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 ?? "",
@@ -292,20 +302,18 @@ 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));
         if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
         if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
 
-        if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
         if (displayFilters.layout === "gantt_chart")
           mutate(ganttFetchKey, {
             start_target_date: true,
             order_by: "sort_order",
           });
-        if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
         if (groupedIssues) mutateMyIssues();
 
         setToastAlert({
@@ -345,8 +353,7 @@ export const CreateUpdateDraftIssueModal: React.FC<IssuesModalProps> = (props) =
     };
 
     if (action === "createDraft") await createDraftIssue(payload);
-    else if (action === "updateDraft" || action === "convertToNewIssue")
-      await updateDraftIssue(payload);
+    else if (action === "updateDraft" || action === "convertToNewIssue") await updateDraftIssue(payload);
     else if (action === "createNewIssue") await createIssue(payload);
 
     clearDraftIssueLocalStorage();
diff --git a/web/components/issues/form.tsx b/web/components/issues/form.tsx
index cfa300b6c..a9832c205 100644
--- a/web/components/issues/form.tsx
+++ b/web/components/issues/form.tsx
@@ -1,11 +1,9 @@
 import React, { FC, useState, useEffect, useRef } from "react";
-
 import { useRouter } from "next/router";
-
-// react-hook-form
 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
@@ -23,16 +21,14 @@ import {
 import { CreateStateModal } from "components/states";
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomMenu, Input, PrimaryButton, SecondaryButton, ToggleSwitch } from "components/ui";
-// components
-import { RichTextEditorWithRef } from "@plane/rich-text-editor";
-
+import { CustomMenu } from "components/ui";
+import { Button, Input, ToggleSwitch } from "@plane/ui";
 // icons
 import { SparklesIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
-import type { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
-import fileService from "services/file.service";
-// services
+import type { IUser, IIssue, ISearchIssueResponse } from "types";
+// components
+import { RichTextEditorWithRef } from "@plane/rich-text-editor";
 
 const defaultValues: Partial<IIssue> = {
   project: "",
@@ -67,7 +63,7 @@ export interface IssueFormProps {
   setCreateMore: React.Dispatch<React.SetStateAction<boolean>>;
   handleDiscardClose: () => void;
   status: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   handleFormDirty: (payload: Partial<IIssue> | null) => void;
   fieldsToShow: (
     | "project"
@@ -85,6 +81,10 @@ export interface IssueFormProps {
   )[];
 }
 
+// services
+const aiService = new AIService();
+const fileService = new FileService();
+
 export const IssueForm: FC<IssueFormProps> = (props) => {
   const {
     handleFormSubmit,
@@ -116,7 +116,6 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
   const { setToastAlert } = useToast();
 
   const {
-    register,
     formState: { errors, isSubmitting, isDirty },
     handleSubmit,
     reset,
@@ -133,19 +132,18 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
   const issueName = watch("name");
 
   const payload: Partial<IIssue> = {
-    name: watch("name"),
-    description: watch("description"),
-    description_html: watch("description_html"),
-    state: watch("state"),
-    priority: watch("priority"),
-    assignees: watch("assignees"),
-    labels: watch("labels"),
-    start_date: watch("start_date"),
-    target_date: watch("target_date"),
-    project: watch("project"),
-    parent: watch("parent"),
-    cycle: watch("cycle"),
-    module: watch("module"),
+    name: getValues("name"),
+    description: getValues("description"),
+    state: getValues("state"),
+    priority: getValues("priority"),
+    assignees: getValues("assignees"),
+    labels: getValues("labels"),
+    start_date: getValues("start_date"),
+    target_date: getValues("target_date"),
+    project: getValues("project"),
+    parent: getValues("parent"),
+    cycle: getValues("cycle"),
+    module: getValues("module"),
   };
 
   useEffect(() => {
@@ -215,9 +213,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
           setToastAlert({
             type: "error",
             title: "Error!",
-            message:
-              error ||
-              "You have reached the maximum number of requests of 50 requests per month per user.",
+            message: error || "You have reached the maximum number of requests of 50 requests per month per user.",
           });
         else
           setToastAlert({
@@ -313,9 +309,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                   <span className="flex-shrink-0 text-custom-text-200">
                     {selectedParentIssue.project__identifier}-{selectedParentIssue.sequence_id}
                   </span>
-                  <span className="truncate font-medium">
-                    {selectedParentIssue.name.substring(0, 50)}
-                  </span>
+                  <span className="truncate font-medium">{selectedParentIssue.name.substring(0, 50)}</span>
                   <XMarkIcon
                     className="h-3 w-3 cursor-pointer"
                     onClick={() => {
@@ -330,21 +324,29 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
             <div className="mt-2 space-y-3">
               {(fieldsToShow.includes("all") || fieldsToShow.includes("name")) && (
                 <div>
-                  <Input
-                    id="name"
+                  <Controller
+                    control={control}
                     name="name"
-                    className="resize-none text-xl"
-                    placeholder="Title"
-                    autoComplete="off"
-                    error={errors.name}
-                    register={register}
-                    validations={{
+                    rules={{
                       required: "Title is required",
                       maxLength: {
                         value: 255,
                         message: "Title should be less than 255 characters",
                       },
                     }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="name"
+                        name="name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.name)}
+                        placeholder="Title"
+                        className="resize-none text-xl w-full"
+                      />
+                    )}
                   />
                 </div>
               )}
@@ -354,8 +356,9 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                     {issueName && issueName !== "" && (
                       <button
                         type="button"
-                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${iAmFeelingLucky ? "cursor-wait" : ""
-                          }`}
+                        className={`flex items-center gap-1 rounded px-1.5 py-1 text-xs hover:bg-custom-background-90 ${
+                          iAmFeelingLucky ? "cursor-wait" : ""
+                        }`}
                         onClick={handleAutoGenerateDescription}
                         disabled={iAmFeelingLucky}
                       >
@@ -381,21 +384,22 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                     name="description_html"
                     control={control}
                     render={({ field: { value, onChange } }) => (
-                        <RichTextEditorWithRef
-                            uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
-                            deleteFile={fileService.deleteImage}
-                            ref={editorRef}
-                            debouncedUpdatesEnabled={false}
-                            value={!value ||
-                                value === "" ||
-                                (typeof value === "object" && Object.keys(value).length === 0)
-                                ? watch("description_html")
-                                : value}
-                            customClassName="min-h-[150px]"
-                            onChange={(description: Object, description_html: string) => {
-                                onChange(description_html);
-                                setValue("description", description);
-                            } } />
+                      <RichTextEditorWithRef
+                        uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
+                        deleteFile={fileService.deleteImage}
+                        ref={editorRef}
+                        debouncedUpdatesEnabled={false}
+                        value={
+                          !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
+                            ? watch("description_html")
+                            : value
+                        }
+                        customClassName="min-h-[150px]"
+                        onChange={(description: Object, description_html: string) => {
+                          onChange(description_html);
+                          setValue("description", description);
+                        }}
+                      />
                     )}
                   />
                   <GptAssistantModal
@@ -444,11 +448,7 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                     control={control}
                     name="assignees"
                     render={({ field: { value, onChange } }) => (
-                      <IssueAssigneeSelect
-                        projectId={projectId}
-                        value={value}
-                        onChange={onChange}
-                      />
+                      <IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
                     )}
                   />
                 )}
@@ -530,24 +530,15 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
                   <CustomMenu ellipsis>
                     {watch("parent") ? (
                       <>
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          onClick={() => setParentIssueListModalOpen(true)}
-                        >
+                        <CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
                           Change parent issue
                         </CustomMenu.MenuItem>
-                        <CustomMenu.MenuItem
-                          renderAs="button"
-                          onClick={() => setValue("parent", null)}
-                        >
+                        <CustomMenu.MenuItem renderAs="button" onClick={() => setValue("parent", null)}>
                           Remove parent issue
                         </CustomMenu.MenuItem>
                       </>
                     ) : (
-                      <CustomMenu.MenuItem
-                        renderAs="button"
-                        onClick={() => setParentIssueListModalOpen(true)}
-                      >
+                      <CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
                         Select Parent Issue
                       </CustomMenu.MenuItem>
                     )}
@@ -563,25 +554,26 @@ export const IssueForm: FC<IssueFormProps> = (props) => {
             onClick={() => setCreateMore((prevData) => !prevData)}
           >
             <span className="text-xs">Create more</span>
-            <ToggleSwitch value={createMore} onChange={() => { }} size="md" />
+            <ToggleSwitch value={createMore} onChange={() => {}} size="md" />
           </div>
           <div className="flex items-center gap-2">
-            <SecondaryButton
+            <Button
+              variant="neutral-primary"
               onClick={() => {
                 handleDiscardClose();
               }}
             >
               Discard
-            </SecondaryButton>
-            <PrimaryButton type="submit" loading={isSubmitting}>
+            </Button>
+            <Button variant="primary" type="submit" loading={isSubmitting}>
               {status
                 ? isSubmitting
                   ? "Updating Issue..."
                   : "Update Issue"
                 : isSubmitting
-                  ? "Adding Issue..."
-                  : "Add Issue"}
-            </PrimaryButton>
+                ? "Adding Issue..."
+                : "Add Issue"}
+            </Button>
           </div>
         </div>
       </form>
diff --git a/web/components/issues/gantt-chart/index.ts b/web/components/issues/gantt-chart/index.ts
deleted file mode 100644
index 7f0d16273..000000000
--- a/web/components/issues/gantt-chart/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./blocks";
-export * from "./layout";
diff --git a/web/components/issues/index.ts b/web/components/issues/index.ts
index 6b83e7ef4..aee53a882 100644
--- a/web/components/issues/index.ts
+++ b/web/components/issues/index.ts
@@ -7,7 +7,7 @@ export * from "./activity";
 export * from "./delete-issue-modal";
 export * from "./description-form";
 export * from "./form";
-export * from "./gantt-chart";
+export * from "./issue-layouts";
 export * from "./main-content";
 export * from "./modal";
 export * from "./parent-issues-list-modal";
diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
new file mode 100644
index 000000000..778feb57f
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -0,0 +1,54 @@
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarHeader, CalendarWeekDays, CalendarWeekHeader } from "components/issues";
+// ui
+import { Spinner } from "@plane/ui";
+// types
+import { ICalendarWeek } from "./types";
+import { IIssueGroupedStructure } from "store/issue";
+
+type Props = {
+  issues: IIssueGroupedStructure | null;
+  layout: "month" | "week" | undefined;
+};
+
+export const CalendarChart: React.FC<Props> = observer((props) => {
+  const { issues, layout } = props;
+
+  const { calendar: calendarStore } = useMobxStore();
+
+  const calendarPayload = calendarStore.calendarPayload;
+
+  const allWeeksOfActiveMonth = calendarStore.allWeeksOfActiveMonth;
+
+  if (!calendarPayload)
+    return (
+      <div className="h-full w-full grid place-items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <>
+      <div className="h-full w-full flex flex-col overflow-hidden">
+        <CalendarHeader />
+        <CalendarWeekHeader />
+        <div className="h-full w-full overflow-y-auto">
+          {layout === "month" ? (
+            <div className="h-full w-full grid grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
+              {allWeeksOfActiveMonth &&
+                Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
+                  <CalendarWeekDays key={weekIndex} week={week} issues={issues} />
+                ))}
+            </div>
+          ) : (
+            <CalendarWeekDays week={calendarStore.allDaysOfActiveWeek} issues={issues} />
+          )}
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
new file mode 100644
index 000000000..7f49e8431
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -0,0 +1,58 @@
+import { observer } from "mobx-react-lite";
+import { Droppable } from "@hello-pangea/dnd";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarIssueBlocks, ICalendarDate } from "components/issues";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+// constants
+import { MONTHS_LIST } from "constants/calendar";
+
+type Props = { date: ICalendarDate; issues: IIssueGroupedStructure | null };
+
+export const CalendarDayTile: React.FC<Props> = observer((props) => {
+  const { date, issues } = props;
+
+  const { issueFilter: issueFilterStore } = useMobxStore();
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+
+  const issuesList = issues ? (issues as IIssueGroupedStructure)[renderDateFormat(date.date)] : null;
+
+  return (
+    <Droppable droppableId={renderDateFormat(date.date)}>
+      {(provided, snapshot) => (
+        <div
+          className={`flex-grow p-2 space-y-1 w-full flex flex-col overflow-hidden ${
+            snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
+              ? "bg-custom-background-90"
+              : "bg-custom-background-100"
+          } ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`}
+          {...provided.droppableProps}
+          ref={provided.innerRef}
+        >
+          <>
+            <div
+              className={`text-xs text-right ${
+                calendarLayout === "month" // if month layout, highlight current month days
+                  ? date.is_current_month
+                    ? "font-medium"
+                    : "text-custom-text-300"
+                  : "font-medium" // if week layout, highlight all days
+              }`}
+            >
+              {date.date.getDate() === 1 && MONTHS_LIST[date.date.getMonth() + 1].shortTitle + " "}
+              {date.date.getDate()}
+            </div>
+            <CalendarIssueBlocks issues={issuesList} />
+            {provided.placeholder}
+          </>
+        </div>
+      )}
+    </Droppable>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/index.ts b/web/components/issues/issue-layouts/calendar/dropdowns/index.ts
new file mode 100644
index 000000000..3f32637c3
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/index.ts
@@ -0,0 +1,2 @@
+export * from "./months-dropdown";
+export * from "./options-dropdown";
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
new file mode 100644
index 000000000..4bb5ebcf0
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/months-dropdown.tsx
@@ -0,0 +1,109 @@
+import React from "react";
+import { Popover, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// icons
+import { ChevronLeft, ChevronRight } from "lucide-react";
+// constants
+import { MONTHS_LIST } from "constants/calendar";
+
+export const CalendarMonthsDropdown: React.FC = observer(() => {
+  const { calendar: calendarStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+
+  const { activeMonthDate } = calendarStore.calendarFilters;
+
+  const getWeekLayoutHeader = (): string => {
+    const allDaysOfActiveWeek = calendarStore.allDaysOfActiveWeek;
+
+    if (!allDaysOfActiveWeek) return "Week view";
+
+    const daysList = Object.keys(allDaysOfActiveWeek);
+
+    const firstDay = new Date(daysList[0]);
+    const lastDay = new Date(daysList[daysList.length - 1]);
+
+    if (firstDay.getMonth() === lastDay.getMonth() && firstDay.getFullYear() === lastDay.getFullYear())
+      return `${MONTHS_LIST[firstDay.getMonth() + 1].title} ${firstDay.getFullYear()}`;
+
+    if (firstDay.getFullYear() !== lastDay.getFullYear()) {
+      return `${MONTHS_LIST[firstDay.getMonth() + 1].shortTitle} ${firstDay.getFullYear()} - ${
+        MONTHS_LIST[lastDay.getMonth() + 1].shortTitle
+      } ${lastDay.getFullYear()}`;
+    } else
+      return `${MONTHS_LIST[firstDay.getMonth() + 1].shortTitle} - ${
+        MONTHS_LIST[lastDay.getMonth() + 1].shortTitle
+      } ${lastDay.getFullYear()}`;
+  };
+
+  const handleDateChange = (date: Date) => {
+    calendarStore.updateCalendarFilters({
+      activeMonthDate: date,
+    });
+  };
+
+  return (
+    <Popover className="relative">
+      <Popover.Button className="outline-none text-xl font-semibold" disabled={calendarLayout === "week"}>
+        {calendarLayout === "month"
+          ? `${MONTHS_LIST[activeMonthDate.getMonth() + 1].title} ${activeMonthDate.getFullYear()}`
+          : getWeekLayoutHeader()}
+      </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>
+          <div className="absolute left-0 z-10 mt-1 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded w-56 p-3 divide-y divide-custom-border-200">
+            <div className="flex items-center justify-between gap-2 pb-3">
+              <button
+                type="button"
+                className="grid place-items-center"
+                onClick={() => {
+                  const previousYear = new Date(activeMonthDate.getFullYear() - 1, activeMonthDate.getMonth(), 1);
+                  handleDateChange(previousYear);
+                }}
+              >
+                <ChevronLeft size={14} />
+              </button>
+              <span className="text-xs">{activeMonthDate.getFullYear()}</span>
+              <button
+                type="button"
+                className="grid place-items-center"
+                onClick={() => {
+                  const nextYear = new Date(activeMonthDate.getFullYear() + 1, activeMonthDate.getMonth(), 1);
+                  handleDateChange(nextYear);
+                }}
+              >
+                <ChevronRight size={14} />
+              </button>
+            </div>
+            <div className="grid grid-cols-4 gap-4 items-stretch justify-items-stretch pt-3">
+              {Object.values(MONTHS_LIST).map((month, index) => (
+                <button
+                  key={month.shortTitle}
+                  type="button"
+                  className="text-xs hover:bg-custom-background-80 rounded py-0.5"
+                  onClick={() => {
+                    const newDate = new Date(activeMonthDate.getFullYear(), index, 1);
+                    handleDateChange(newDate);
+                  }}
+                >
+                  {month.shortTitle}
+                </button>
+              ))}
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
new file mode 100644
index 000000000..c02be5084
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/dropdowns/options-dropdown.tsx
@@ -0,0 +1,117 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { Popover, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// ui
+import { ToggleSwitch } from "@plane/ui";
+// icons
+import { Check, ChevronUp } from "lucide-react";
+// types
+import { TCalendarLayouts } from "types";
+// constants
+import { CALENDAR_LAYOUTS } from "constants/calendar";
+
+export const CalendarOptionsDropdown: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { issueFilter: issueFilterStore, calendar: calendarStore } = useMobxStore();
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+  const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false;
+
+  const handleLayoutChange = (layout: TCalendarLayouts) => {
+    if (!workspaceSlug || !projectId) return;
+
+    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      display_filters: {
+        calendar: {
+          ...issueFilterStore.userDisplayFilters.calendar,
+          layout,
+        },
+      },
+    });
+
+    calendarStore.updateCalendarPayload(
+      layout === "month" ? calendarStore.calendarFilters.activeMonthDate : calendarStore.calendarFilters.activeWeekDate
+    );
+  };
+
+  const handleToggleWeekends = () => {
+    const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false;
+
+    if (!workspaceSlug || !projectId) return;
+
+    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      display_filters: {
+        calendar: {
+          ...issueFilterStore.userDisplayFilters.calendar,
+          show_weekends: !showWeekends,
+        },
+      },
+    });
+  };
+
+  return (
+    <Popover className="relative">
+      {({ open }) => {
+        if (open) {
+        }
+        return (
+          <>
+            <Popover.Button
+              className={`outline-none bg-custom-background-80 text-xs rounded flex items-center gap-1.5 px-2.5 py-1 hover:bg-custom-background-80 ${
+                open ? "text-custom-text-100" : "text-custom-text-200"
+              }`}
+            >
+              <div className="font-medium">Options</div>
+              <div
+                className={`w-3.5 h-3.5 flex items-center justify-center transition-all ${open ? "" : "rotate-180"}`}
+              >
+                <ChevronUp width={12} strokeWidth={2} />
+              </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>
+                <div className="absolute right-0 z-10 mt-1 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded min-w-[12rem] p-1 overflow-hidden">
+                  <div>
+                    {Object.entries(CALENDAR_LAYOUTS).map(([layout, layoutDetails]) => (
+                      <button
+                        key={layout}
+                        type="button"
+                        className="text-xs hover:bg-custom-background-80 w-full text-left px-1 py-1.5 rounded flex items-center justify-between gap-2"
+                        onClick={() => handleLayoutChange(layoutDetails.key)}
+                      >
+                        {layoutDetails.title}
+                        {calendarLayout === layout && <Check size={12} strokeWidth={2} />}
+                      </button>
+                    ))}
+                    <button
+                      type="button"
+                      className="text-xs hover:bg-custom-background-80 w-full text-left px-1 py-1.5 rounded flex items-center justify-between gap-2"
+                      onClick={handleToggleWeekends}
+                    >
+                      Show weekends
+                      <ToggleSwitch value={showWeekends} onChange={() => {}} />
+                    </button>
+                  </div>
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        );
+      }}
+    </Popover>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/header.tsx b/web/components/issues/issue-layouts/calendar/header.tsx
new file mode 100644
index 000000000..034be98c4
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/header.tsx
@@ -0,0 +1,98 @@
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarMonthsDropdown, CalendarOptionsDropdown } from "components/issues";
+// icons
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+export const CalendarHeader: React.FC = observer(() => {
+  const { issueFilter: issueFilterStore, calendar: calendarStore } = useMobxStore();
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+
+  const { activeMonthDate, activeWeekDate } = calendarStore.calendarFilters;
+
+  const handlePrevious = () => {
+    if (calendarLayout === "month") {
+      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);
+
+      calendarStore.updateCalendarFilters({
+        activeMonthDate: previousMonthFirstDate,
+      });
+    } else {
+      const previousWeekDate = new Date(
+        activeWeekDate.getFullYear(),
+        activeWeekDate.getMonth(),
+        activeWeekDate.getDate() - 7
+      );
+
+      calendarStore.updateCalendarFilters({
+        activeWeekDate: previousWeekDate,
+      });
+    }
+  };
+
+  const handleNext = () => {
+    if (calendarLayout === "month") {
+      const nextMonthYear =
+        activeMonthDate.getMonth() === 11 ? activeMonthDate.getFullYear() + 1 : activeMonthDate.getFullYear();
+      const nextMonthMonth = (activeMonthDate.getMonth() + 1) % 12;
+
+      const nextMonthFirstDate = new Date(nextMonthYear, nextMonthMonth, 1);
+
+      calendarStore.updateCalendarFilters({
+        activeMonthDate: nextMonthFirstDate,
+      });
+    } else {
+      const nextWeekDate = new Date(
+        activeWeekDate.getFullYear(),
+        activeWeekDate.getMonth(),
+        activeWeekDate.getDate() + 7
+      );
+
+      calendarStore.updateCalendarFilters({
+        activeWeekDate: nextWeekDate,
+      });
+    }
+  };
+
+  const handleToday = () => {
+    const today = new Date();
+    const firstDayOfCurrentMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+
+    calendarStore.updateCalendarFilters({
+      activeMonthDate: firstDayOfCurrentMonth,
+      activeWeekDate: today,
+    });
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-2 px-3 mb-4">
+      <div className="flex items-center gap-1.5">
+        <button type="button" className="grid place-items-center" onClick={handlePrevious}>
+          <ChevronLeft size={16} strokeWidth={2} />
+        </button>
+        <button type="button" className="grid place-items-center" onClick={handleNext}>
+          <ChevronRight size={16} strokeWidth={2} />
+        </button>
+        <CalendarMonthsDropdown />
+      </div>
+      <div className="flex items-center gap-1.5">
+        <button
+          type="button"
+          className="px-2.5 py-1 text-xs bg-custom-background-80 rounded font-medium text-custom-text-200 hover:text-custom-text-100"
+          onClick={handleToday}
+        >
+          Today
+        </button>
+        <CalendarOptionsDropdown />
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/index.ts b/web/components/issues/issue-layouts/calendar/index.ts
new file mode 100644
index 000000000..be4383954
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/index.ts
@@ -0,0 +1,9 @@
+export * from "./dropdowns";
+export * from "./roots";
+export * from "./calendar";
+export * from "./types.d";
+export * from "./day-tile";
+export * from "./header";
+export * from "./issue-blocks";
+export * from "./week-days";
+export * from "./week-header";
diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
new file mode 100644
index 000000000..915795eba
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx
@@ -0,0 +1,50 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Draggable } from "@hello-pangea/dnd";
+import { observer } from "mobx-react-lite";
+
+// types
+import { IIssue } from "types";
+
+type Props = { issues: IIssue[] | null };
+
+export const CalendarIssueBlocks: React.FC<Props> = observer((props) => {
+  const { issues } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div className="space-y-2 h-full w-full overflow-y-auto p-0.5">
+      {issues?.map((issue, index) => (
+        <Draggable key={issue.id} draggableId={issue.id} index={index}>
+          {(provided, snapshot) => (
+            <Link href={`/${workspaceSlug?.toString()}/projects/${issue.project}/issues/${issue.id}`}>
+              <a
+                className={`h-8 w-full shadow-custom-shadow-2xs rounded py-1.5 px-1 flex items-center gap-1.5 border-[0.5px] border-custom-border-100 ${
+                  snapshot.isDragging
+                    ? "shadow-custom-shadow-rg bg-custom-background-90"
+                    : "bg-custom-background-100 hover:bg-custom-background-90"
+                }`}
+                {...provided.draggableProps}
+                {...provided.dragHandleProps}
+                ref={provided.innerRef}
+              >
+                <span
+                  className="h-full w-0.5 rounded flex-shrink-0"
+                  style={{
+                    backgroundColor: issue.state_detail.color,
+                  }}
+                />
+                <div className="text-xs text-custom-text-300 flex-shrink-0">
+                  {issue.project_detail.identifier}-{issue.sequence_id}
+                </div>
+                <h6 className="text-xs flex-grow truncate">{issue.name}</h6>
+              </a>
+            </Link>
+          )}
+        </Draggable>
+      ))}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
new file mode 100644
index 000000000..727ce047e
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/cycle-root.tsx
@@ -0,0 +1,39 @@
+import { observer } from "mobx-react-lite";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarChart } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+
+export const CycleCalendarLayout: React.FC = observer(() => {
+  const { cycleIssue: cycleIssueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  // TODO: add drag and drop functionality
+  const onDragEnd = (result: DropResult) => {
+    if (!result) return;
+
+    // return if not dropped on the correct place
+    if (!result.destination) return;
+
+    // return if dropped on the same date
+    if (result.destination.droppableId === result.source.droppableId) return;
+
+    // issueKanBanViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = cycleIssueStore.getIssues;
+
+  return (
+    <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
+      <DragDropContext onDragEnd={onDragEnd}>
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+        />
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/roots/index.ts b/web/components/issues/issue-layouts/calendar/roots/index.ts
new file mode 100644
index 000000000..19de04806
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/index.ts
@@ -0,0 +1,4 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./project-view-root";
+export * from "./project-root";
diff --git a/web/components/issues/issue-layouts/calendar/roots/module-root.tsx b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
new file mode 100644
index 000000000..48792b5d7
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/module-root.tsx
@@ -0,0 +1,39 @@
+import { observer } from "mobx-react-lite";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarChart } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+
+export const ModuleCalendarLayout: React.FC = observer(() => {
+  const { moduleIssue: moduleIssueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  // TODO: add drag and drop functionality
+  const onDragEnd = (result: DropResult) => {
+    if (!result) return;
+
+    // return if not dropped on the correct place
+    if (!result.destination) return;
+
+    // return if dropped on the same date
+    if (result.destination.droppableId === result.source.droppableId) return;
+
+    // issueKanBanViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = moduleIssueStore.getIssues;
+
+  return (
+    <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
+      <DragDropContext onDragEnd={onDragEnd}>
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+        />
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
new file mode 100644
index 000000000..1482c4262
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/project-root.tsx
@@ -0,0 +1,39 @@
+import { observer } from "mobx-react-lite";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarChart } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+
+export const CalendarLayout: React.FC = observer(() => {
+  const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  // TODO: add drag and drop functionality
+  const onDragEnd = (result: DropResult) => {
+    if (!result) return;
+
+    // return if not dropped on the correct place
+    if (!result.destination) return;
+
+    // return if dropped on the same date
+    if (result.destination.droppableId === result.source.droppableId) return;
+
+    // issueKanBanViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = issueStore.getIssues;
+
+  return (
+    <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
+      <DragDropContext onDragEnd={onDragEnd}>
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+        />
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
new file mode 100644
index 000000000..76a0ac525
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/roots/project-view-root.tsx
@@ -0,0 +1,39 @@
+import { observer } from "mobx-react-lite";
+import { DragDropContext, DropResult } from "@hello-pangea/dnd";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarChart } from "components/issues";
+// types
+import { IIssueGroupedStructure } from "store/issue";
+
+export const ProjectViewCalendarLayout: React.FC = observer(() => {
+  const { projectViewIssues: projectViewIssuesStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  // TODO: add drag and drop functionality
+  const onDragEnd = (result: DropResult) => {
+    if (!result) return;
+
+    // return if not dropped on the correct place
+    if (!result.destination) return;
+
+    // return if dropped on the same date
+    if (result.destination.droppableId === result.source.droppableId) return;
+
+    // issueKanBanViewStore?.handleDragDrop(result.source, result.destination);
+  };
+
+  const issues = projectViewIssuesStore.getIssues;
+
+  return (
+    <div className="h-full w-full pt-4 bg-custom-background-100 overflow-hidden">
+      <DragDropContext onDragEnd={onDragEnd}>
+        <CalendarChart
+          issues={issues as IIssueGroupedStructure | null}
+          layout={issueFilterStore.userDisplayFilters.calendar?.layout}
+        />
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/types.d.ts b/web/components/issues/issue-layouts/calendar/types.d.ts
new file mode 100644
index 000000000..3855aeb86
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/types.d.ts
@@ -0,0 +1,24 @@
+export interface ICalendarDate {
+  date: Date;
+  year: number;
+  month: number;
+  day: number;
+  week: number; // week number wrt year, eg- 51, 52
+  is_current_month: boolean;
+  is_current_week: boolean;
+  is_today: boolean;
+}
+
+export interface ICalendarWeek {
+  [date: string]: ICalendarDate;
+}
+
+export interface ICalendarMonth {
+  [monthIndex: string]: {
+    [weekNumber: string]: ICalendarWeek;
+  };
+}
+
+export interface ICalendarPayload {
+  [year: string]: ICalendarMonth;
+}
diff --git a/web/components/issues/issue-layouts/calendar/week-days.tsx b/web/components/issues/issue-layouts/calendar/week-days.tsx
new file mode 100644
index 000000000..f6317b3a5
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/week-days.tsx
@@ -0,0 +1,41 @@
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CalendarDayTile } from "components/issues";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+// types
+import { ICalendarDate, ICalendarWeek } from "./types";
+import { IIssueGroupedStructure } from "store/issue";
+
+type Props = {
+  issues: IIssueGroupedStructure | null;
+  week: ICalendarWeek | undefined;
+};
+
+export const CalendarWeekDays: React.FC<Props> = observer((props) => {
+  const { issues, week } = props;
+
+  const { issueFilter: issueFilterStore } = useMobxStore();
+
+  const calendarLayout = issueFilterStore.userDisplayFilters.calendar?.layout ?? "month";
+  const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false;
+
+  if (!week) return null;
+
+  return (
+    <div
+      className={`grid divide-x-[0.5px] divide-custom-border-200 ${showWeekends ? "grid-cols-7" : "grid-cols-5"} ${
+        calendarLayout === "month" ? "" : "h-full"
+      }`}
+    >
+      {Object.values(week).map((date: ICalendarDate) => {
+        if (!showWeekends && (date.date.getDay() === 0 || date.date.getDay() === 6)) return null;
+
+        return <CalendarDayTile key={renderDateFormat(date.date)} date={date} issues={issues} />;
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/calendar/week-header.tsx b/web/components/issues/issue-layouts/calendar/week-header.tsx
new file mode 100644
index 000000000..eb6b9ae46
--- /dev/null
+++ b/web/components/issues/issue-layouts/calendar/week-header.tsx
@@ -0,0 +1,30 @@
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// constants
+import { DAYS_LIST } from "constants/calendar";
+
+export const CalendarWeekHeader: React.FC = observer(() => {
+  const { issueFilter: issueFilterStore } = useMobxStore();
+
+  const showWeekends = issueFilterStore.userDisplayFilters.calendar?.show_weekends ?? false;
+
+  return (
+    <div
+      className={`grid text-sm font-medium divide-x-[0.5px] divide-custom-border-200 ${
+        showWeekends ? "grid-cols-7" : "grid-cols-5"
+      }`}
+    >
+      {Object.values(DAYS_LIST).map((day) => {
+        if (!showWeekends && (day.shortTitle === "Sat" || day.shortTitle === "Sun")) return null;
+
+        return (
+          <div key={day.shortTitle} className="h-11 bg-custom-background-90 flex items-center px-4">
+            {day.shortTitle}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
new file mode 100644
index 000000000..a94be20a6
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
@@ -0,0 +1,54 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { X } from "lucide-react";
+// helpers
+import { renderLongDateFormat } from "helpers/date-time.helper";
+import { capitalizeFirstLetter } from "helpers/string.helper";
+// constants
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedDateFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values } = props;
+
+  const getDateLabel = (value: string): string => {
+    let dateLabel = "";
+
+    const dateDetails = DATE_FILTER_OPTIONS.find((d) => d.value === value);
+
+    if (dateDetails) dateLabel = dateDetails.name;
+    else {
+      const dateParts = value.split(";");
+
+      if (dateParts.length === 2) {
+        const [date, time] = dateParts;
+
+        dateLabel = `${capitalizeFirstLetter(time)} ${renderLongDateFormat(date)}`;
+      }
+    }
+
+    return dateLabel;
+  };
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((date) => (
+        <div key={date} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+          <span className="normal-case">{getDateLabel(date)}</span>
+          <button
+            type="button"
+            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+            onClick={() => handleRemove(date)}
+          >
+            <X size={10} strokeWidth={2} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
new file mode 100644
index 000000000..f379f675a
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@@ -0,0 +1,110 @@
+import { observer } from "mobx-react-lite";
+
+// components
+import {
+  AppliedDateFilters,
+  AppliedLabelsFilters,
+  AppliedMembersFilters,
+  AppliedPriorityFilters,
+  AppliedProjectFilters,
+  AppliedStateFilters,
+  AppliedStateGroupFilters,
+} from "components/issues";
+// icons
+import { X } from "lucide-react";
+// helpers
+import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
+// types
+import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
+
+type Props = {
+  appliedFilters: IIssueFilterOptions;
+  handleClearAllFilters: () => void;
+  handleRemoveFilter: (key: keyof IIssueFilterOptions, value: string | null) => void;
+  labels?: IIssueLabels[] | undefined;
+  members?: IUserLite[] | undefined;
+  projects?: IProject[] | undefined;
+  states?: IStateResponse | undefined;
+};
+
+const membersFilters = ["assignees", "created_by", "subscriber"];
+const dateFilters = ["start_date", "target_date"];
+
+export const AppliedFiltersList: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, projects, states } = props;
+
+  if (!appliedFilters) return null;
+
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="flex items-stretch gap-2 flex-wrap bg-custom-background-100">
+      {Object.entries(appliedFilters).map(([key, value]) => {
+        const filterKey = key as keyof IIssueFilterOptions;
+
+        if (!value) return;
+
+        return (
+          <div
+            key={filterKey}
+            className="capitalize py-1 px-2 border border-custom-border-200 rounded-md flex items-center gap-2 flex-wrap"
+          >
+            <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+            {membersFilters.includes(filterKey) && (
+              <AppliedMembersFilters
+                handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                members={members}
+                values={value}
+              />
+            )}
+            {dateFilters.includes(filterKey) && (
+              <AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
+            )}
+            {filterKey === "labels" && (
+              <AppliedLabelsFilters
+                handleRemove={(val) => handleRemoveFilter("labels", val)}
+                labels={labels}
+                values={value}
+              />
+            )}
+            {filterKey === "priority" && (
+              <AppliedPriorityFilters handleRemove={(val) => handleRemoveFilter("priority", val)} values={value} />
+            )}
+            {filterKey === "state" && (
+              <AppliedStateFilters
+                handleRemove={(val) => handleRemoveFilter("state", val)}
+                states={states}
+                values={value}
+              />
+            )}
+            {filterKey === "state_group" && (
+              <AppliedStateGroupFilters handleRemove={(val) => handleRemoveFilter("state_group", val)} values={value} />
+            )}
+            {filterKey === "project" && (
+              <AppliedProjectFilters
+                handleRemove={(val) => handleRemoveFilter("project", val)}
+                projects={projects}
+                values={value}
+              />
+            )}
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemoveFilter(filterKey, null)}
+            >
+              <X size={12} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+      <button
+        type="button"
+        onClick={handleClearAllFilters}
+        className="flex items-center gap-2 text-xs border border-custom-border-200 py-1 px-2 rounded-md text-custom-text-300 hover:text-custom-text-200"
+      >
+        Clear all
+        <X size={12} strokeWidth={2} />
+      </button>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/index.ts b/web/components/issues/issue-layouts/filters/applied-filters/index.ts
new file mode 100644
index 000000000..a9feecfdf
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/index.ts
@@ -0,0 +1,9 @@
+export * from "./roots";
+export * from "./date";
+export * from "./filters-list";
+export * from "./label";
+export * from "./members";
+export * from "./priority";
+export * from "./project";
+export * from "./state";
+export * from "./state-group";
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
new file mode 100644
index 000000000..abc5a8b2c
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
@@ -0,0 +1,45 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { X } from "lucide-react";
+// types
+import { IIssueLabels } from "types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  labels: IIssueLabels[] | undefined;
+  values: string[];
+};
+
+export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, labels, values } = props;
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((labelId) => {
+        const labelDetails = labels?.find((l) => l.id === labelId);
+
+        if (!labelDetails) return null;
+
+        return (
+          <div key={labelId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <span
+              className="h-1.5 w-1.5 rounded-full"
+              style={{
+                backgroundColor: labelDetails.color,
+              }}
+            />
+            <span className="normal-case">{labelDetails.name}</span>
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(labelId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
new file mode 100644
index 000000000..0c6d0a6b8
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -0,0 +1,42 @@
+import { observer } from "mobx-react-lite";
+
+// ui
+import { Avatar } from "components/ui";
+// icons
+import { X } from "lucide-react";
+// types
+import { IUserLite } from "types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  members: IUserLite[] | undefined;
+  values: string[];
+};
+
+export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, members, values } = props;
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((memberId) => {
+        const memberDetails = members?.find((m) => m.id === memberId);
+
+        if (!memberDetails) return null;
+
+        return (
+          <div key={memberId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <Avatar user={memberDetails} height="16px" width="16px" />
+            <span className="normal-case">{memberDetails.display_name}</span>
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(memberId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
new file mode 100644
index 000000000..44328afff
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -0,0 +1,47 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { PriorityIcon } from "components/icons";
+import { X } from "lucide-react";
+// types
+import { TIssuePriorities } from "types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values } = props;
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((priority) => (
+        <div key={priority} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+          <PriorityIcon
+            priority={priority as TIssuePriorities}
+            className={`!text-xs ${
+              priority === "urgent"
+                ? "text-red-500"
+                : priority === "high"
+                ? "text-orange-500"
+                : priority === "medium"
+                ? "text-yellow-500"
+                : priority === "low"
+                ? "text-green-500"
+                : ""
+            }`}
+          />
+          {priority}
+          <button
+            type="button"
+            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+            onClick={() => handleRemove(priority)}
+          >
+            <X size={10} strokeWidth={2} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
new file mode 100644
index 000000000..d8bc758ea
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -0,0 +1,49 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { X } from "lucide-react";
+// types
+import { IProject } from "types";
+import { renderEmoji } from "helpers/emoji.helper";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  projects: IProject[] | undefined;
+  values: string[];
+};
+
+export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, projects, values } = props;
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((projectId) => {
+        const projectDetails = projects?.find((p) => p.id === projectId);
+
+        if (!projectDetails) return null;
+
+        return (
+          <div key={projectId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            {projectDetails.emoji ? (
+              <span className="grid flex-shrink-0 place-items-center">{renderEmoji(projectDetails.emoji)}</span>
+            ) : projectDetails.icon_prop ? (
+              <div className="grid place-items-center flex-shrink-0 -my-1">{renderEmoji(projectDetails.icon_prop)}</div>
+            ) : (
+              <span className="grid mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                {projectDetails?.name.charAt(0)}
+              </span>
+            )}
+            <span className="normal-case">{projectDetails.name}</span>
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(projectId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
new file mode 100644
index 000000000..5910eff96
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
@@ -0,0 +1,77 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const CycleAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query;
+
+  const { project: projectStore, cycleIssueFilter: cycleIssueFilterStore } = useMobxStore();
+
+  const userFilters = cycleIssueFilterStore.cycleFilters;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!workspaceSlug || !projectId || !cycleId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      cycleIssueFilterStore.updateCycleFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), {
+        [key]: null,
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = cycleIssueFilterStore.cycleFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    cycleIssueFilterStore.updateCycleFilters(workspaceSlug.toString(), projectId.toString(), cycleId.toString(), {
+      [key]: newValues,
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId || !cycleId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    cycleIssueFilterStore.updateCycleFilters(workspaceSlug.toString(), projectId.toString(), cycleId?.toString(), {
+      ...newFilters,
+    });
+  };
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        states={projectStore.states?.[projectId?.toString() ?? ""]}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
new file mode 100644
index 000000000..ad1712b55
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
@@ -0,0 +1,114 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// ui
+import { Button } from "@plane/ui";
+// helpers
+import { areFiltersDifferent } from "helpers/filter.helper";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const GlobalViewsAppliedFiltersRoot = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const {
+    globalViews: globalViewsStore,
+    globalViewFilters: globalViewFiltersStore,
+    project: projectStore,
+    workspace: workspaceStore,
+  } = useMobxStore();
+
+  const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
+  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(storedFilters ?? {}).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!globalViewId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+        [key]: null,
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = globalViewFiltersStore.storedFilters?.[globalViewId.toString()]?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+      [key]: newValues,
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!globalViewId || !storedFilters) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(storedFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), {
+      ...newFilters,
+    });
+  };
+
+  const handleUpdateView = () => {
+    if (!workspaceSlug || !globalViewId || !viewDetails) return;
+
+    globalViewsStore.updateGlobalView(workspaceSlug.toString(), globalViewId.toString(), {
+      query_data: {
+        ...viewDetails.query_data,
+        filters: {
+          ...(storedFilters ?? {}),
+        },
+      },
+    });
+  };
+
+  // update stored filters when view details are fetched
+  useEffect(() => {
+    if (!globalViewId || !viewDetails) return;
+
+    if (!globalViewFiltersStore.storedFilters[globalViewId.toString()])
+      globalViewFiltersStore.updateStoredFilters(globalViewId.toString(), viewDetails?.query_data?.filters ?? {});
+  }, [globalViewId, globalViewFiltersStore, viewDetails]);
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="flex items-start justify-between gap-4 p-4">
+      <AppliedFiltersList
+        appliedFilters={storedFilters ?? {}}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={workspaceStore.workspaceLabels ?? undefined}
+        members={workspaceStore.workspaceMembers?.map((m) => m.member)}
+        projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
+      />
+      {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (
+        <Button variant="primary" onClick={handleUpdateView}>
+          Update view
+        </Button>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts b/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts
new file mode 100644
index 000000000..c7280e470
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/index.ts
@@ -0,0 +1,5 @@
+export * from "./cycle-root";
+export * from "./global-view-root";
+export * from "./module-root";
+export * from "./project-view-root";
+export * from "./project-root";
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
new file mode 100644
index 000000000..6bcfb40f5
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
@@ -0,0 +1,77 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query;
+
+  const { project: projectStore, moduleFilter: moduleFilterStore } = useMobxStore();
+
+  const userFilters = moduleFilterStore.moduleFilters;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
+        [key]: null,
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = moduleFilterStore.moduleFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId.toString(), {
+      [key]: newValues,
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId || !moduleId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    moduleFilterStore.updateModuleFilters(workspaceSlug.toString(), projectId.toString(), moduleId?.toString(), {
+      ...newFilters,
+    });
+  };
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        states={projectStore.states?.[projectId?.toString() ?? ""]}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
new file mode 100644
index 000000000..505649bce
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
@@ -0,0 +1,81 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
+
+  const userFilters = issueFilterStore.userFilters;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(userFilters).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!workspaceSlug || !projectId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        filters: {
+          [key]: null,
+        },
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = issueFilterStore.userFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      filters: {
+        [key]: newValues,
+      },
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(userFilters).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+      filters: { ...newFilters },
+    });
+  };
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        states={projectStore.states?.[projectId?.toString() ?? ""]}
+      />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
new file mode 100644
index 000000000..368b6b6fa
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@@ -0,0 +1,111 @@
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { AppliedFiltersList } from "components/issues";
+// ui
+import { PrimaryButton } from "components/ui";
+// helpers
+import { areFiltersDifferent } from "helpers/filter.helper";
+// types
+import { IIssueFilterOptions } from "types";
+
+export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const {
+    project: projectStore,
+    projectViews: projectViewsStore,
+    projectViewFilters: projectViewFiltersStore,
+  } = useMobxStore();
+
+  const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined;
+  const storedFilters = viewId ? projectViewFiltersStore.storedFilters[viewId.toString()] : undefined;
+
+  // filters whose value not null or empty array
+  const appliedFilters: IIssueFilterOptions = {};
+  Object.entries(storedFilters ?? {}).forEach(([key, value]) => {
+    if (!value) return;
+
+    if (Array.isArray(value) && value.length === 0) return;
+
+    appliedFilters[key as keyof IIssueFilterOptions] = value;
+  });
+
+  const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
+    if (!viewId) return;
+
+    // remove all values of the key if value is null
+    if (!value) {
+      projectViewFiltersStore.updateStoredFilters(viewId.toString(), {
+        [key]: null,
+      });
+      return;
+    }
+
+    // remove the passed value from the key
+    let newValues = storedFilters?.[key] ?? [];
+    newValues = newValues.filter((val) => val !== value);
+
+    projectViewFiltersStore.updateStoredFilters(viewId.toString(), {
+      [key]: newValues,
+    });
+  };
+
+  const handleClearAllFilters = () => {
+    if (!workspaceSlug || !projectId || !viewId) return;
+
+    const newFilters: IIssueFilterOptions = {};
+    Object.keys(storedFilters ?? {}).forEach((key) => {
+      newFilters[key as keyof IIssueFilterOptions] = null;
+    });
+
+    projectViewFiltersStore.updateStoredFilters(viewId.toString(), {
+      ...newFilters,
+    });
+  };
+
+  const handleUpdateView = () => {
+    if (!workspaceSlug || !projectId || !viewId || !viewDetails) return;
+
+    projectViewsStore.updateView(workspaceSlug.toString(), projectId.toString(), viewId.toString(), {
+      query_data: {
+        ...viewDetails.query_data,
+        ...(storedFilters ?? {}),
+      },
+    });
+  };
+
+  // update stored filters when view details are fetched
+  useEffect(() => {
+    if (!viewId || !viewDetails) return;
+
+    if (!projectViewFiltersStore.storedFilters[viewId.toString()])
+      projectViewFiltersStore.updateStoredFilters(viewId.toString(), viewDetails?.query_data ?? {});
+  }, [projectViewFiltersStore, viewDetails, viewId]);
+
+  // return if no filters are applied
+  if (Object.keys(appliedFilters).length === 0) return null;
+
+  return (
+    <div className="flex items-center justify-between gap-4 p-4">
+      <AppliedFiltersList
+        appliedFilters={appliedFilters}
+        handleClearAllFilters={handleClearAllFilters}
+        handleRemoveFilter={handleRemoveFilter}
+        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        members={projectStore.members?.[projectId?.toString() ?? ""]?.map((m) => m.member)}
+        states={projectStore.states?.[projectId?.toString() ?? ""]}
+      />
+      {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && (
+        <PrimaryButton className="whitespace-nowrap" onClick={handleUpdateView}>
+          Update view
+        </PrimaryButton>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
new file mode 100644
index 000000000..bfeab73ab
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -0,0 +1,33 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { StateGroupIcon } from "components/icons";
+import { X } from "lucide-react";
+import { TStateGroups } from "types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  values: string[];
+};
+
+export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, values } = props;
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((stateGroup) => (
+        <div key={stateGroup} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+          <StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" />
+          {stateGroup}
+          <button
+            type="button"
+            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+            onClick={() => handleRemove(stateGroup)}
+          >
+            <X size={10} strokeWidth={2} />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
new file mode 100644
index 000000000..830c92088
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/applied-filters/state.tsx
@@ -0,0 +1,45 @@
+import { observer } from "mobx-react-lite";
+
+// icons
+import { StateGroupIcon } from "components/icons";
+import { X } from "lucide-react";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// types
+import { IStateResponse } from "types";
+
+type Props = {
+  handleRemove: (val: string) => void;
+  states: IStateResponse | undefined;
+  values: string[];
+};
+
+export const AppliedStateFilters: React.FC<Props> = observer((props) => {
+  const { handleRemove, states, values } = props;
+
+  const statesList = getStatesList(states);
+
+  return (
+    <div className="flex items-center gap-1 flex-wrap">
+      {values.map((stateId) => {
+        const stateDetails = statesList?.find((s) => s.id === stateId);
+
+        if (!stateDetails) return null;
+
+        return (
+          <div key={stateId} className="text-xs flex items-center gap-1 bg-custom-background-80 p-1 rounded">
+            <StateGroupIcon color={stateDetails.color} stateGroup={stateDetails.group} height="12px" width="12px" />
+            {stateDetails.name}
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(stateId)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
new file mode 100644
index 000000000..6a1dd8bc1
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/display-filters-selection.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import {
+  FilterDisplayProperties,
+  FilterExtraOptions,
+  FilterGroupBy,
+  FilterIssueType,
+  FilterOrderBy,
+  FilterSubGroupBy,
+} from "components/issues";
+// types
+import { IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
+import { ILayoutDisplayFiltersOptions } from "constants/issue";
+
+type Props = {
+  displayFilters: IIssueDisplayFilterOptions;
+  displayProperties: IIssueDisplayProperties;
+  handleDisplayFiltersUpdate: (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => void;
+  handleDisplayPropertiesUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
+  layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
+};
+
+export const DisplayFiltersSelection: React.FC<Props> = observer((props) => {
+  const {
+    displayFilters,
+    displayProperties,
+    handleDisplayFiltersUpdate,
+    handleDisplayPropertiesUpdate,
+    layoutDisplayFiltersOptions,
+  } = props;
+
+  const isDisplayFilterEnabled = (displayFilter: keyof IIssueDisplayFilterOptions) =>
+    Object.keys(layoutDisplayFiltersOptions?.display_filters ?? {}).includes(displayFilter);
+
+  return (
+    <div className="w-full h-full overflow-hidden overflow-y-auto relative px-2.5 divide-y divide-custom-border-200">
+      {/* display properties */}
+      {layoutDisplayFiltersOptions?.display_properties && (
+        <div className="py-2">
+          <FilterDisplayProperties displayProperties={displayProperties} handleUpdate={handleDisplayPropertiesUpdate} />
+        </div>
+      )}
+
+      {/* group by */}
+      {isDisplayFilterEnabled("group_by") && (
+        <div className="py-2">
+          <FilterGroupBy
+            selectedGroupBy={displayFilters.group_by}
+            selectedSubGroupBy={displayFilters.sub_group_by}
+            groupByOptions={layoutDisplayFiltersOptions?.display_filters.group_by ?? []}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                group_by: val,
+              })
+            }
+          />
+        </div>
+      )}
+
+      {/* sub-group by */}
+      {isDisplayFilterEnabled("sub_group_by") &&
+        displayFilters.group_by !== null &&
+        displayFilters.layout === "kanban" && (
+          <div className="py-2">
+            <FilterSubGroupBy
+              selectedGroupBy={displayFilters.group_by}
+              selectedSubGroupBy={displayFilters.sub_group_by}
+              handleUpdate={(val) =>
+                handleDisplayFiltersUpdate({
+                  sub_group_by: val,
+                })
+              }
+              subGroupByOptions={layoutDisplayFiltersOptions?.display_filters.sub_group_by ?? []}
+            />
+          </div>
+        )}
+
+      {/* order by */}
+      {isDisplayFilterEnabled("order_by") && (
+        <div className="py-2">
+          <FilterOrderBy
+            selectedOrderBy={displayFilters.order_by}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                order_by: val,
+              })
+            }
+            orderByOptions={layoutDisplayFiltersOptions?.display_filters.order_by ?? []}
+          />
+        </div>
+      )}
+
+      {/* issue type */}
+      {isDisplayFilterEnabled("type") && (
+        <div className="py-2">
+          <FilterIssueType
+            selectedIssueType={displayFilters.type}
+            handleUpdate={(val) =>
+              handleDisplayFiltersUpdate({
+                type: val,
+              })
+            }
+          />
+        </div>
+      )}
+
+      {/* Options */}
+      {layoutDisplayFiltersOptions?.extra_options.access && (
+        <div className="py-2">
+          <FilterExtraOptions
+            selectedExtraOptions={{
+              show_empty_groups: displayFilters.show_empty_groups ?? false,
+              sub_issue: displayFilters.sub_issue ?? false,
+            }}
+            handleUpdate={(key, val) =>
+              handleDisplayFiltersUpdate({
+                [key]: val,
+              })
+            }
+            enabledExtraOptions={layoutDisplayFiltersOptions?.extra_options.values}
+          />
+        </div>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
new file mode 100644
index 000000000..c5d4a724d
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/display-properties.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader } from "../helpers/filter-header";
+// types
+import { IIssueDisplayProperties } from "types";
+// constants
+import { ISSUE_DISPLAY_PROPERTIES } from "constants/issue";
+
+type Props = {
+  displayProperties: IIssueDisplayProperties;
+  handleUpdate: (updatedDisplayProperties: Partial<IIssueDisplayProperties>) => void;
+};
+
+export const FilterDisplayProperties: React.FC<Props> = observer((props) => {
+  const { displayProperties, handleUpdate } = props;
+
+  const [previewEnabled, setPreviewEnabled] = React.useState(true);
+
+  return (
+    <>
+      <FilterHeader
+        title="Display Properties"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div className="flex items-center gap-2 flex-wrap mt-1">
+          {ISSUE_DISPLAY_PROPERTIES.map((displayProperty) => (
+            <button
+              key={displayProperty.key}
+              type="button"
+              className={`rounded transition-all text-xs border px-2 py-0.5 ${
+                displayProperties?.[displayProperty.key]
+                  ? "bg-custom-primary-100 border-custom-primary-100 text-white"
+                  : "border-custom-border-200 hover:bg-custom-background-80"
+              }`}
+              onClick={() =>
+                handleUpdate({
+                  [displayProperty.key]: !displayProperties?.[displayProperty.key],
+                })
+              }
+            >
+              {displayProperty.title}
+            </button>
+          ))}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
new file mode 100644
index 000000000..111d25772
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/extra-options.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { IIssueDisplayFilterOptions, TIssueExtraOptions } from "types";
+// constants
+import { ISSUE_EXTRA_OPTIONS } from "constants/issue";
+
+type Props = {
+  selectedExtraOptions: {
+    sub_issue: boolean;
+    show_empty_groups: boolean;
+  };
+  handleUpdate: (key: keyof IIssueDisplayFilterOptions, val: boolean) => void;
+  enabledExtraOptions: TIssueExtraOptions[];
+};
+
+export const FilterExtraOptions: React.FC<Props> = observer((props) => {
+  const { selectedExtraOptions, handleUpdate, enabledExtraOptions } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const isExtraOptionEnabled = (option: TIssueExtraOptions) => enabledExtraOptions.includes(option);
+
+  return (
+    <>
+      <FilterHeader
+        title="Extra Options"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_EXTRA_OPTIONS.map((option) => {
+            if (!isExtraOptionEnabled(option.key)) return null;
+
+            return (
+              <FilterOption
+                key={option.key}
+                isChecked={selectedExtraOptions?.[option.key] ? true : false}
+                onClick={() => handleUpdate(option.key, !selectedExtraOptions?.[option.key])}
+                title={option.title}
+              />
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
new file mode 100644
index 000000000..04820f94c
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/group-by.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { TIssueGroupByOptions } from "types";
+// constants
+import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
+
+type Props = {
+  selectedGroupBy: TIssueGroupByOptions | undefined;
+  selectedSubGroupBy: TIssueGroupByOptions | undefined;
+  groupByOptions: TIssueGroupByOptions[];
+  handleUpdate: (val: TIssueGroupByOptions) => void;
+};
+
+export const FilterGroupBy: React.FC<Props> = observer((props) => {
+  const { selectedGroupBy, selectedSubGroupBy, groupByOptions, handleUpdate } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  return (
+    <>
+      <FilterHeader
+        title="Group by"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_GROUP_BY_OPTIONS.filter((option) => groupByOptions.includes(option.key)).map((groupBy) => {
+            if (selectedSubGroupBy !== null && groupBy.key === selectedSubGroupBy) return null;
+
+            return (
+              <FilterOption
+                key={groupBy?.key}
+                isChecked={selectedGroupBy === groupBy?.key ? true : false}
+                onClick={() => handleUpdate(groupBy.key)}
+                title={groupBy.title}
+                multiple={false}
+              />
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/index.ts b/web/components/issues/issue-layouts/filters/header/display-filters/index.ts
new file mode 100644
index 000000000..741d0a22a
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/index.ts
@@ -0,0 +1,7 @@
+export * from "./display-filters-selection";
+export * from "./display-properties";
+export * from "./extra-options";
+export * from "./group-by";
+export * from "./issue-type";
+export * from "./order-by";
+export * from "./sub-group-by";
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx
new file mode 100644
index 000000000..8732bc739
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/issue-type.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { TIssueTypeFilters } from "types";
+// constants
+import { ISSUE_FILTER_OPTIONS } from "constants/issue";
+
+type Props = {
+  selectedIssueType: TIssueTypeFilters | undefined;
+  handleUpdate: (val: TIssueTypeFilters) => void;
+};
+
+export const FilterIssueType: React.FC<Props> = observer((props) => {
+  const { selectedIssueType, handleUpdate } = props;
+
+  const [previewEnabled, setPreviewEnabled] = React.useState(true);
+
+  return (
+    <>
+      <FilterHeader
+        title="Issue Type"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_FILTER_OPTIONS.map((issueType) => (
+            <FilterOption
+              key={issueType?.key}
+              isChecked={selectedIssueType === issueType?.key ? true : false}
+              onClick={() => handleUpdate(issueType?.key)}
+              title={issueType.title}
+              multiple={false}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
new file mode 100644
index 000000000..18920c514
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/order-by.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { TIssueOrderByOptions } from "types";
+// constants
+import { ISSUE_ORDER_BY_OPTIONS } from "constants/issue";
+
+type Props = {
+  selectedOrderBy: TIssueOrderByOptions | undefined;
+  handleUpdate: (val: TIssueOrderByOptions) => void;
+  orderByOptions: TIssueOrderByOptions[];
+};
+
+export const FilterOrderBy: React.FC<Props> = observer((props) => {
+  const { selectedOrderBy, handleUpdate, orderByOptions } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  return (
+    <>
+      <FilterHeader
+        title="Order by"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_ORDER_BY_OPTIONS.filter((option) => orderByOptions.includes(option.key)).map((orderBy) => (
+            <FilterOption
+              key={orderBy?.key}
+              isChecked={selectedOrderBy === orderBy?.key ? true : false}
+              onClick={() => handleUpdate(orderBy.key)}
+              title={orderBy.title}
+              multiple={false}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx b/web/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
new file mode 100644
index 000000000..83f09092d
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/display-filters/sub-group-by.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// types
+import { TIssueGroupByOptions } from "types";
+// constants
+import { ISSUE_GROUP_BY_OPTIONS } from "constants/issue";
+
+type Props = {
+  selectedGroupBy: TIssueGroupByOptions | undefined;
+  selectedSubGroupBy: TIssueGroupByOptions | undefined;
+  handleUpdate: (val: TIssueGroupByOptions) => void;
+  subGroupByOptions: TIssueGroupByOptions[];
+};
+
+export const FilterSubGroupBy: React.FC<Props> = observer((props) => {
+  const { selectedGroupBy, selectedSubGroupBy, handleUpdate, subGroupByOptions } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  return (
+    <>
+      <FilterHeader
+        title="Sub-group by"
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {ISSUE_GROUP_BY_OPTIONS.filter((option) => subGroupByOptions.includes(option.key)).map((subGroupBy) => {
+            if (selectedGroupBy !== null && subGroupBy.key === selectedGroupBy) return null;
+
+            return (
+              <FilterOption
+                key={subGroupBy?.key}
+                isChecked={selectedSubGroupBy === subGroupBy?.key ? true : false}
+                onClick={() => handleUpdate(subGroupBy.key)}
+                title={subGroupBy.title}
+                multiple={false}
+              />
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
new file mode 100644
index 000000000..eace4bec5
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Avatar } from "components/ui";
+import { Loader } from "@plane/ui";
+// types
+import { IUserLite } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  members: IUserLite[] | undefined;
+  searchQuery: string;
+  viewButtons: React.ReactNode;
+};
+
+export const FilterAssignees: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, members, searchQuery, viewButtons } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = members?.filter((member) =>
+    member.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <>
+      <FilterHeader
+        title={`Assignee${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((member) => (
+                  <FilterOption
+                    key={`assignees-${member.id}`}
+                    isChecked={appliedFilters?.includes(member.id) ? true : false}
+                    onClick={() => handleUpdate(member.id)}
+                    icon={<Avatar user={member} height="18px" width="18px" />}
+                    title={member.display_name}
+                  />
+                ))}
+                {viewButtons}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
new file mode 100644
index 000000000..5d8978ffd
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Avatar } from "components/ui";
+import { Loader } from "@plane/ui";
+// types
+import { IUserLite } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  members: IUserLite[] | undefined;
+  searchQuery: string;
+  viewButtons: React.ReactNode;
+};
+
+export const FilterCreatedBy: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, members, searchQuery, viewButtons } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = members?.filter((member) =>
+    member.display_name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  return (
+    <>
+      <FilterHeader
+        title={`Created by${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((member) => (
+                  <FilterOption
+                    key={`created-by-${member.id}`}
+                    isChecked={appliedFilters?.includes(member.id) ? true : false}
+                    onClick={() => handleUpdate(member.id)}
+                    icon={<Avatar user={member} height="18px" width="18px" />}
+                    title={member.display_name}
+                  />
+                ))}
+                {viewButtons}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
new file mode 100644
index 000000000..51857217e
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
@@ -0,0 +1,349 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import {
+  FilterAssignees,
+  FilterCreatedBy,
+  FilterLabels,
+  FilterPriority,
+  FilterProjects,
+  FilterStartDate,
+  FilterState,
+  FilterStateGroup,
+  FilterTargetDate,
+} from "components/issues";
+// icons
+import { Search, X } from "lucide-react";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// types
+import { IIssueFilterOptions, IIssueLabels, IProject, IStateResponse, IUserLite } from "types";
+// constants
+import { ILayoutDisplayFiltersOptions, ISSUE_PRIORITIES, ISSUE_STATE_GROUPS } from "constants/issue";
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  filters: IIssueFilterOptions;
+  handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
+  layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
+  labels?: IIssueLabels[] | undefined;
+  members?: IUserLite[] | undefined;
+  projects?: IProject[] | undefined;
+  states?: IStateResponse | undefined;
+};
+
+type ViewButtonProps = {
+  handleLess: () => void;
+  handleMore: () => void;
+  isViewLessVisible: boolean;
+  isViewMoreVisible: boolean;
+};
+
+const ViewButtons = ({ handleLess, handleMore, isViewLessVisible, isViewMoreVisible }: ViewButtonProps) => (
+  <div className="flex items-center gap-2 ml-7 mt-1">
+    {/* TODO: handle view more and less in a better way */}
+    {isViewMoreVisible && (
+      <button className="text-custom-primary-100 text-xs font-medium" onClick={handleMore}>
+        View more
+      </button>
+    )}
+    {isViewLessVisible && (
+      <button className="text-custom-primary-100 text-xs font-medium" onClick={handleLess}>
+        View less
+      </button>
+    )}
+  </div>
+);
+
+export const FilterSelection: React.FC<Props> = observer((props) => {
+  const { filters, handleFiltersUpdate, layoutDisplayFiltersOptions, labels, members, projects, states } = props;
+
+  const [filtersSearchQuery, setFiltersSearchQuery] = useState("");
+
+  const statesList = getStatesList(states);
+
+  const [filtersToRender, setFiltersToRender] = useState<{
+    [key in keyof IIssueFilterOptions]: {
+      currentLength: number;
+      totalLength: number;
+    };
+  }>({
+    assignees: {
+      currentLength: 5,
+      totalLength: members?.length ?? 0,
+    },
+    created_by: {
+      currentLength: 5,
+      totalLength: members?.length ?? 0,
+    },
+    labels: {
+      currentLength: 5,
+      totalLength: labels?.length ?? 0,
+    },
+    priority: {
+      currentLength: 5,
+      totalLength: ISSUE_PRIORITIES.length,
+    },
+    project: {
+      currentLength: 5,
+      totalLength: projects?.length ?? 0,
+    },
+    state_group: {
+      currentLength: 5,
+      totalLength: ISSUE_STATE_GROUPS.length,
+    },
+    state: {
+      currentLength: 5,
+      totalLength: statesList?.length ?? 0,
+    },
+    start_date: {
+      currentLength: 5,
+      totalLength: DATE_FILTER_OPTIONS.length + 1,
+    },
+    target_date: {
+      currentLength: 5,
+      totalLength: DATE_FILTER_OPTIONS.length + 1,
+    },
+  });
+
+  const handleViewMore = (filterName: keyof IIssueFilterOptions) => {
+    const filterDetails = filtersToRender[filterName];
+
+    if (!filterDetails) return;
+
+    if (filterDetails.currentLength <= filterDetails.totalLength)
+      setFiltersToRender((prev) => ({
+        ...prev,
+        [filterName]: {
+          ...prev[filterName],
+          currentLength: filterDetails.currentLength + 5,
+        },
+      }));
+  };
+
+  const handleViewLess = (filterName: keyof IIssueFilterOptions) => {
+    const filterDetails = filtersToRender[filterName];
+
+    if (!filterDetails) return;
+
+    setFiltersToRender((prev) => ({
+      ...prev,
+      [filterName]: {
+        ...prev[filterName],
+        currentLength: 5,
+      },
+    }));
+  };
+
+  const isViewMoreVisible = (filterName: keyof IIssueFilterOptions): boolean => {
+    const filterDetails = filtersToRender[filterName];
+
+    if (!filterDetails) return false;
+
+    return filterDetails.currentLength < filterDetails.totalLength;
+  };
+
+  const isViewLessVisible = (filterName: keyof IIssueFilterOptions): boolean => {
+    const filterDetails = filtersToRender[filterName];
+
+    if (!filterDetails) return false;
+
+    return filterDetails.currentLength > 5;
+  };
+
+  const isFilterEnabled = (filter: keyof IIssueFilterOptions) => layoutDisplayFiltersOptions?.filters.includes(filter);
+
+  return (
+    <div className="w-full h-full flex flex-col overflow-hidden">
+      <div className="p-2.5 pb-0 bg-custom-background-100">
+        <div className="bg-custom-background-90 border-[0.5px] border-custom-border-200 text-xs rounded flex items-center gap-1.5 px-1.5 py-1">
+          <Search className="text-custom-text-400" size={12} strokeWidth={2} />
+          <input
+            type="text"
+            className="bg-custom-background-90 placeholder:text-custom-text-400 w-full outline-none"
+            placeholder="Search"
+            value={filtersSearchQuery}
+            onChange={(e) => setFiltersSearchQuery(e.target.value)}
+            autoFocus
+          />
+          {filtersSearchQuery !== "" && (
+            <button type="button" className="grid place-items-center" onClick={() => setFiltersSearchQuery("")}>
+              <X className="text-custom-text-300" size={12} strokeWidth={2} />
+            </button>
+          )}
+        </div>
+      </div>
+      <div className="w-full h-full divide-y divide-custom-border-200 px-2.5 overflow-y-auto">
+        {/* priority */}
+        {isFilterEnabled("priority") && (
+          <div className="py-2">
+            <FilterPriority
+              appliedFilters={filters.priority ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("priority", val)}
+              itemsToRender={filtersToRender.priority?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+              viewButtons={
+                <ViewButtons
+                  isViewLessVisible={isViewLessVisible("priority")}
+                  isViewMoreVisible={isViewMoreVisible("priority")}
+                  handleLess={() => handleViewLess("priority")}
+                  handleMore={() => handleViewMore("priority")}
+                />
+              }
+            />
+          </div>
+        )}
+
+        {/* state group */}
+        {isFilterEnabled("state_group") && (
+          <div className="py-2">
+            <FilterStateGroup
+              appliedFilters={filters.state_group ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("state_group", val)}
+              itemsToRender={filtersToRender.state_group?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+              viewButtons={
+                <ViewButtons
+                  isViewLessVisible={isViewLessVisible("state_group")}
+                  isViewMoreVisible={isViewMoreVisible("state_group")}
+                  handleLess={() => handleViewLess("state_group")}
+                  handleMore={() => handleViewMore("state_group")}
+                />
+              }
+            />
+          </div>
+        )}
+
+        {/* state */}
+        {isFilterEnabled("state") && (
+          <div className="py-2">
+            <FilterState
+              appliedFilters={filters.state ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("state", val)}
+              itemsToRender={filtersToRender.state?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+              states={states}
+              viewButtons={
+                <ViewButtons
+                  isViewLessVisible={isViewLessVisible("state")}
+                  isViewMoreVisible={isViewMoreVisible("state")}
+                  handleLess={() => handleViewLess("state")}
+                  handleMore={() => handleViewMore("state")}
+                />
+              }
+            />
+          </div>
+        )}
+
+        {/* assignees */}
+        {isFilterEnabled("assignees") && (
+          <div className="py-2">
+            <FilterAssignees
+              appliedFilters={filters.assignees ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("assignees", val)}
+              itemsToRender={filtersToRender.assignees?.currentLength ?? 0}
+              members={members}
+              searchQuery={filtersSearchQuery}
+              viewButtons={
+                <ViewButtons
+                  isViewLessVisible={isViewLessVisible("assignees")}
+                  isViewMoreVisible={isViewMoreVisible("assignees")}
+                  handleLess={() => handleViewLess("assignees")}
+                  handleMore={() => handleViewMore("assignees")}
+                />
+              }
+            />
+          </div>
+        )}
+
+        {/* created_by */}
+        {isFilterEnabled("created_by") && (
+          <div className="py-2">
+            <FilterCreatedBy
+              appliedFilters={filters.created_by ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("created_by", val)}
+              itemsToRender={filtersToRender.created_by?.currentLength ?? 0}
+              members={members}
+              searchQuery={filtersSearchQuery}
+              viewButtons={
+                <ViewButtons
+                  isViewLessVisible={isViewLessVisible("created_by")}
+                  isViewMoreVisible={isViewMoreVisible("created_by")}
+                  handleLess={() => handleViewLess("created_by")}
+                  handleMore={() => handleViewMore("created_by")}
+                />
+              }
+            />
+          </div>
+        )}
+
+        {/* labels */}
+        {isFilterEnabled("labels") && (
+          <div className="py-2">
+            <FilterLabels
+              appliedFilters={filters.labels ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("labels", val)}
+              itemsToRender={filtersToRender.labels?.currentLength ?? 0}
+              labels={labels}
+              searchQuery={filtersSearchQuery}
+              viewButtons={
+                <ViewButtons
+                  isViewLessVisible={isViewLessVisible("labels")}
+                  isViewMoreVisible={isViewMoreVisible("labels")}
+                  handleLess={() => handleViewLess("labels")}
+                  handleMore={() => handleViewMore("labels")}
+                />
+              }
+            />
+          </div>
+        )}
+
+        {/* project */}
+        {isFilterEnabled("project") && (
+          <div className="py-2">
+            <FilterProjects
+              appliedFilters={filters.project ?? null}
+              projects={projects}
+              handleUpdate={(val) => handleFiltersUpdate("project", val)}
+              itemsToRender={filtersToRender.project?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+              viewButtons={
+                <ViewButtons
+                  isViewLessVisible={isViewLessVisible("project")}
+                  isViewMoreVisible={isViewMoreVisible("project")}
+                  handleLess={() => handleViewLess("project")}
+                  handleMore={() => handleViewMore("project")}
+                />
+              }
+            />
+          </div>
+        )}
+
+        {/* start_date */}
+        {isFilterEnabled("start_date") && (
+          <div className="py-2">
+            <FilterStartDate
+              appliedFilters={filters.start_date ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("start_date", val)}
+              itemsToRender={filtersToRender.start_date?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+
+        {/* target_date */}
+        {isFilterEnabled("target_date") && (
+          <div className="py-2">
+            <FilterTargetDate
+              appliedFilters={filters.target_date ?? null}
+              handleUpdate={(val) => handleFiltersUpdate("target_date", val)}
+              itemsToRender={filtersToRender.target_date?.currentLength ?? 0}
+              searchQuery={filtersSearchQuery}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/filters/index.ts b/web/components/issues/issue-layouts/filters/header/filters/index.ts
new file mode 100644
index 000000000..5c381709e
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/index.ts
@@ -0,0 +1,10 @@
+export * from "./assignee";
+export * from "./created-by";
+export * from "./filters-selection";
+export * from "./labels";
+export * from "./priority";
+export * from "./project";
+export * from "./start-date";
+export * from "./state-group";
+export * from "./state";
+export * from "./target-date";
diff --git a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
new file mode 100644
index 000000000..37f6846f9
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Loader } from "@plane/ui";
+// types
+import { IIssueLabels } from "types";
+
+const LabelIcons = ({ color }: { color: string }) => (
+  <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: color }} />
+);
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  labels: IIssueLabels[] | undefined;
+  searchQuery: string;
+  viewButtons: React.ReactNode;
+};
+
+export const FilterLabels: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, labels, searchQuery, viewButtons } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = labels?.filter((label) => label.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Label${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((label) => (
+                  <FilterOption
+                    key={label?.id}
+                    isChecked={appliedFilters?.includes(label?.id) ? true : false}
+                    onClick={() => handleUpdate(label?.id)}
+                    icon={<LabelIcons color={label.color} />}
+                    title={label.name}
+                  />
+                ))}
+                {viewButtons}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/priority.tsx b/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
new file mode 100644
index 000000000..4eff176e0
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/priority.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// icons
+import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+// constants
+import { ISSUE_PRIORITIES } from "constants/issue";
+
+const PriorityIcons = ({
+  priority,
+  size = 12,
+  strokeWidth = 1.5,
+}: {
+  priority: string;
+  size?: number;
+  strokeWidth?: number;
+}) => {
+  if (priority === "urgent")
+    return (
+      <div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-red-500 bg-red-500 text-white flex justify-center items-center">
+        <AlertCircle size={size} strokeWidth={strokeWidth} />
+      </div>
+    );
+  if (priority === "high")
+    return (
+      <div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-red-500 flex justify-center items-center pl-1">
+        <SignalHigh size={size} strokeWidth={strokeWidth} />
+      </div>
+    );
+  if (priority === "medium")
+    return (
+      <div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-orange-500 flex justify-center items-center pl-1">
+        <SignalMedium size={size} strokeWidth={strokeWidth} />
+      </div>
+    );
+  if (priority === "low")
+    return (
+      <div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-green-500 flex justify-center items-center pl-1">
+        <SignalLow size={size} strokeWidth={strokeWidth} />
+      </div>
+    );
+  return (
+    <div className="flex-shrink-0 rounded-sm overflow-hidden w-5 h-5 border border-custom-border-200 text-custom-text-400 flex justify-center items-center">
+      <Ban size={size} strokeWidth={strokeWidth} />
+    </div>
+  );
+};
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  searchQuery: string;
+  viewButtons: React.ReactNode;
+};
+
+export const FilterPriority: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, searchQuery, viewButtons } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = ISSUE_PRIORITIES.filter((p) => p.key.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Priority${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.slice(0, itemsToRender).map((priority) => (
+                <FilterOption
+                  key={priority.key}
+                  isChecked={appliedFilters?.includes(priority.key) ? true : false}
+                  onClick={() => handleUpdate(priority.key)}
+                  icon={<PriorityIcons priority={priority.key} />}
+                  title={priority.title}
+                />
+              ))}
+              {viewButtons}
+            </>
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/filters/project.tsx b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
new file mode 100644
index 000000000..de02e9692
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/project.tsx
@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Loader } from "@plane/ui";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import { IProject } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  projects: IProject[] | undefined;
+  searchQuery: string;
+  viewButtons: React.ReactNode;
+};
+
+export const FilterProjects: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, projects, searchQuery, viewButtons } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = projects?.filter((project) => project.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`Project${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((project) => (
+                  <FilterOption
+                    key={`project-${project.id}`}
+                    isChecked={appliedFilters?.includes(project.id) ? true : false}
+                    onClick={() => handleUpdate(project.id)}
+                    icon={
+                      project.emoji ? (
+                        <span className="grid flex-shrink-0 place-items-center text-sm">
+                          {renderEmoji(project.emoji)}
+                        </span>
+                      ) : project.icon_prop ? (
+                        <div className="grid place-items-center flex-shrink-0 -my-1">
+                          {renderEmoji(project.icon_prop)}
+                        </div>
+                      ) : (
+                        <span className="grid mr-1 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                          {project?.name.charAt(0)}
+                        </span>
+                      )
+                    }
+                    title={project.name}
+                  />
+                ))}
+                {viewButtons}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx b/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
new file mode 100644
index 000000000..e93f1fa7d
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+import { DateFilterModal } from "components/core";
+// constants
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  itemsToRender: number;
+  searchQuery: string;
+};
+
+export const FilterStartDate: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_FILTER_OPTIONS.filter((d) => d.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Start date"
+        />
+      )}
+      <FilterHeader
+        title={`Start date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.slice(0, itemsToRender).map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
new file mode 100644
index 000000000..c5551a30d
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/state-group.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// icons
+import { StateGroupIcon } from "components/icons";
+// constants
+import { ISSUE_STATE_GROUPS } from "constants/issue";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  searchQuery: string;
+  viewButtons: React.ReactNode;
+};
+
+export const FilterStateGroup: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, searchQuery, viewButtons } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = ISSUE_STATE_GROUPS.filter((s) => s.key.includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`State group${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.slice(0, itemsToRender).map((stateGroup) => (
+                <FilterOption
+                  key={stateGroup.key}
+                  isChecked={appliedFilters?.includes(stateGroup.key) ? true : false}
+                  onClick={() => handleUpdate(stateGroup.key)}
+                  icon={<StateGroupIcon stateGroup={stateGroup.key} />}
+                  title={stateGroup.title}
+                />
+              ))}
+              {viewButtons}
+            </>
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/filters/state.tsx b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
new file mode 100644
index 000000000..6f3472c8e
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/state.tsx
@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+// ui
+import { Loader } from "@plane/ui";
+// icons
+import { StateGroupIcon } from "components/icons";
+// helpers
+import { getStatesList } from "helpers/state.helper";
+// types
+import { IStateResponse } from "types";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string) => void;
+  itemsToRender: number;
+  searchQuery: string;
+  states: IStateResponse | undefined;
+  viewButtons: React.ReactNode;
+};
+
+export const FilterState: React.FC<Props> = (props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, searchQuery, states, viewButtons } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+
+  const statesList = getStatesList(states);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = statesList?.filter((s) => s.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      <FilterHeader
+        title={`State${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions ? (
+            filteredOptions.length > 0 ? (
+              <>
+                {filteredOptions.slice(0, itemsToRender).map((state) => (
+                  <FilterOption
+                    key={state.id}
+                    isChecked={appliedFilters?.includes(state.id) ? true : false}
+                    onClick={() => handleUpdate(state.id)}
+                    icon={<StateGroupIcon stateGroup={state.group} color={state.color} />}
+                    title={state.name}
+                  />
+                ))}
+                {viewButtons}
+              </>
+            ) : (
+              <p className="text-xs text-custom-text-400 italic">No matches found</p>
+            )
+          ) : (
+            <Loader className="space-y-2">
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+              <Loader.Item height="20px" />
+            </Loader>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx b/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
new file mode 100644
index 000000000..c007aa039
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { observer } from "mobx-react-lite";
+
+// components
+import { FilterHeader, FilterOption } from "components/issues";
+import { DateFilterModal } from "components/core";
+// constants
+import { DATE_FILTER_OPTIONS } from "constants/filters";
+
+type Props = {
+  appliedFilters: string[] | null;
+  handleUpdate: (val: string | string[]) => void;
+  itemsToRender: number;
+  searchQuery: string;
+};
+
+export const FilterTargetDate: React.FC<Props> = observer((props) => {
+  const { appliedFilters, handleUpdate, itemsToRender, searchQuery } = props;
+
+  const [previewEnabled, setPreviewEnabled] = useState(true);
+  const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
+
+  const appliedFiltersCount = appliedFilters?.length ?? 0;
+
+  const filteredOptions = DATE_FILTER_OPTIONS.filter((d) => d.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      {isDateFilterModalOpen && (
+        <DateFilterModal
+          handleClose={() => setIsDateFilterModalOpen(false)}
+          isOpen={isDateFilterModalOpen}
+          onSelect={(val) => handleUpdate(val)}
+          title="Due date"
+        />
+      )}
+      <FilterHeader
+        title={`Target date${appliedFiltersCount > 0 ? ` (${appliedFiltersCount})` : ""}`}
+        isPreviewEnabled={previewEnabled}
+        handleIsPreviewEnabled={() => setPreviewEnabled(!previewEnabled)}
+      />
+      {previewEnabled && (
+        <div>
+          {filteredOptions.length > 0 ? (
+            <>
+              {filteredOptions.slice(0, itemsToRender).map((option) => (
+                <FilterOption
+                  key={option.value}
+                  isChecked={appliedFilters?.includes(option.value) ? true : false}
+                  onClick={() => handleUpdate(option.value)}
+                  title={option.name}
+                  multiple
+                />
+              ))}
+              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+            </>
+          ) : (
+            <p className="text-xs text-custom-text-400 italic">No matches found</p>
+          )}
+        </div>
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
new file mode 100644
index 000000000..105a07324
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/helpers/dropdown.tsx
@@ -0,0 +1,71 @@
+import React, { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+import { Popover, Transition } from "@headlessui/react";
+
+// ui
+import { Button } from "@plane/ui";
+// icons
+import { ChevronUp } from "lucide-react";
+
+type Props = {
+  children: React.ReactNode;
+  title?: string;
+};
+
+export const FiltersDropdown: React.FC<Props> = (props) => {
+  const { children, title = "Dropdown" } = props;
+
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "auto",
+  });
+
+  return (
+    <Popover as="div">
+      {({ open }) => {
+        if (open) {
+        }
+        return (
+          <>
+            <Popover.Button as={React.Fragment}>
+              <Button
+                ref={setReferenceElement}
+                variant="neutral-primary"
+                size="sm"
+                appendIcon={
+                  <ChevronUp className={`transition-all ${open ? "" : "rotate-180"}`} size={14} strokeWidth={2} />
+                }
+              >
+                <div className={`${open ? "text-custom-text-100" : "text-custom-text-200"}`}>
+                  <span>{title}</span>
+                </div>
+              </Button>
+            </Popover.Button>
+            <Transition
+              as={Fragment}
+              enter="transition ease-out duration-200"
+              enterFrom="opacity-0 translate-y-1"
+              enterTo="opacity-100 translate-y-0"
+              leave="transition ease-in duration-150"
+              leaveFrom="opacity-100 translate-y-0"
+              leaveTo="opacity-0 translate-y-1"
+            >
+              <Popover.Panel>
+                <div
+                  className="z-10 bg-custom-background-100 border border-custom-border-200 shadow-custom-shadow-rg rounded overflow-hidden"
+                  ref={setPopperElement}
+                  style={styles.popper}
+                  {...attributes.popper}
+                >
+                  <div className="w-[18.75rem] max-h-[37.5rem] flex flex-col overflow-hidden">{children}</div>
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </>
+        );
+      }}
+    </Popover>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx b/web/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
new file mode 100644
index 000000000..4513b0795
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/helpers/filter-header.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+// lucide icons
+import { ChevronDown, ChevronUp } from "lucide-react";
+
+interface IFilterHeader {
+  title: string;
+  isPreviewEnabled: boolean;
+  handleIsPreviewEnabled: () => void;
+}
+
+export const FilterHeader = ({ title, isPreviewEnabled, handleIsPreviewEnabled }: IFilterHeader) => (
+  <div className="flex items-center justify-between gap-2 bg-custom-background-100 sticky top-0">
+    <div className="text-custom-text-300 text-xs font-medium flex-grow truncate">{title}</div>
+    <button
+      type="button"
+      className="flex-shrink-0 w-5 h-5 grid place-items-center rounded hover:bg-custom-background-80"
+      onClick={handleIsPreviewEnabled}
+    >
+      {isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+    </button>
+  </div>
+);
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx b/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
new file mode 100644
index 000000000..4b6f1b041
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/helpers/filter-option.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+// lucide icons
+import { Check } from "lucide-react";
+
+type Props = {
+  icon?: React.ReactNode;
+  isChecked: boolean;
+  title: React.ReactNode;
+  onClick?: () => void;
+  multiple?: boolean;
+};
+
+export const FilterOption: React.FC<Props> = (props) => {
+  const { icon, isChecked, multiple = true, onClick, title } = props;
+
+  return (
+    <button
+      type="button"
+      className="flex items-center gap-2 rounded hover:bg-custom-background-80 w-full p-1.5"
+      onClick={onClick}
+    >
+      <div
+        className={`flex-shrink-0 w-3 h-3 grid place-items-center bg-custom-background-90 border ${
+          isChecked ? "bg-custom-primary-100 border-custom-primary-100 text-white" : "border-custom-border-300"
+        } ${multiple ? "rounded-sm" : "rounded-full"}`}
+      >
+        {isChecked && <Check size={10} strokeWidth={3} />}
+      </div>
+      <div className="flex items-center gap-2 truncate">
+        {icon && <div className="flex-shrink-0 grid place-items-center w-5">{icon}</div>}
+        <div className="flex-grow truncate text-custom-text-200 text-xs">{title}</div>
+      </div>
+    </button>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/header/helpers/index.ts b/web/components/issues/issue-layouts/filters/header/helpers/index.ts
new file mode 100644
index 000000000..ef38d9884
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/helpers/index.ts
@@ -0,0 +1,3 @@
+export * from "./dropdown";
+export * from "./filter-header";
+export * from "./filter-option";
diff --git a/web/components/issues/issue-layouts/filters/header/index.ts b/web/components/issues/issue-layouts/filters/header/index.ts
new file mode 100644
index 000000000..61375f0ff
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/index.ts
@@ -0,0 +1,4 @@
+export * from "./display-filters";
+export * from "./filters";
+export * from "./helpers";
+export * from "./layout-selection";
diff --git a/web/components/issues/issue-layouts/filters/header/layout-selection.tsx b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
new file mode 100644
index 000000000..fab67fc5b
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/header/layout-selection.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+
+// ui
+import { Tooltip } from "@plane/ui";
+// types
+import { TIssueLayouts } from "types";
+// constants
+import { ISSUE_LAYOUTS } from "constants/issue";
+
+type Props = {
+  layouts: TIssueLayouts[];
+  onChange: (layout: TIssueLayouts) => void;
+  selectedLayout: TIssueLayouts | undefined;
+};
+
+export const LayoutSelection: React.FC<Props> = (props) => {
+  const { layouts, onChange, selectedLayout } = props;
+
+  return (
+    <div className="flex items-center gap-1 p-1 rounded bg-custom-background-80">
+      {ISSUE_LAYOUTS.filter((l) => layouts.includes(l.key)).map((layout) => (
+        <Tooltip key={layout.key} tooltipContent={layout.title}>
+          <button
+            type="button"
+            className={`w-7 h-[22px] rounded grid place-items-center transition-all hover:bg-custom-background-100 overflow-hidden group ${
+              selectedLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
+            }`}
+            onClick={() => onChange(layout.key)}
+          >
+            <layout.icon
+              size={14}
+              strokeWidth={2}
+              className={`${selectedLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
+            />
+          </button>
+        </Tooltip>
+      ))}
+    </div>
+  );
+};
diff --git a/web/components/issues/issue-layouts/filters/index.ts b/web/components/issues/issue-layouts/filters/index.ts
new file mode 100644
index 000000000..427d96943
--- /dev/null
+++ b/web/components/issues/issue-layouts/filters/index.ts
@@ -0,0 +1,2 @@
+export * from "./header";
+export * from "./applied-filters";
diff --git a/web/components/issues/gantt-chart/blocks.tsx b/web/components/issues/issue-layouts/gantt/blocks.tsx
similarity index 83%
rename from web/components/issues/gantt-chart/blocks.tsx
rename to web/components/issues/issue-layouts/gantt/blocks.tsx
index 3364565a3..ef3a0e7e2 100644
--- a/web/components/issues/gantt-chart/blocks.tsx
+++ b/web/components/issues/issue-layouts/gantt/blocks.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import { StateGroupIcon } from "components/icons";
 // helpers
@@ -33,16 +33,13 @@ export const IssueGanttBlock = ({ data }: { data: IIssue }) => {
           <div className="space-y-1">
             <h5>{data?.name}</h5>
             <div>
-              {renderShortDate(data?.start_date ?? "")} to{" "}
-              {renderShortDate(data?.target_date ?? "")}
+              {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.target_date ?? "")}
             </div>
           </div>
         }
         position="top-left"
       >
-        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-          {data?.name}
-        </div>
+        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">{data?.name}</div>
       </Tooltip>
     </div>
   );
@@ -62,10 +59,7 @@ export const IssueGanttSidebarBlock = ({ data }: { data: IIssue }) => {
   };
 
   return (
-    <div
-      className="relative w-full flex items-center gap-2 h-full cursor-pointer"
-      onClick={openPeekOverview}
-    >
+    <div className="relative w-full flex items-center gap-2 h-full cursor-pointer" onClick={openPeekOverview}>
       <StateGroupIcon stateGroup={data?.state_detail?.group} color={data?.state_detail?.color} />
       <div className="text-xs text-custom-text-300 flex-shrink-0">
         {data?.project_detail?.identifier} {data?.sequence_id}
diff --git a/web/components/views/gantt-chart.tsx b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
similarity index 51%
rename from web/components/views/gantt-chart.tsx
rename to web/components/issues/issue-layouts/gantt/cycle-root.tsx
index 6f43a32e6..f411543e8 100644
--- a/web/components/views/gantt-chart.tsx
+++ b/web/components/issues/issue-layouts/gantt/cycle-root.tsx
@@ -1,58 +1,54 @@
 import { useRouter } from "next/router";
-
+import { observer } from "mobx-react-lite";
 // hooks
-import useGanttChartViewIssues from "hooks/gantt-chart/view-issues-view";
-import useUser from "hooks/use-user";
-import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
+import { useMobxStore } from "lib/mobx/store-provider";
 import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
 import { IssueGanttBlock, IssueGanttSidebarBlock, IssuePeekOverview } from "components/issues";
 // types
-import { IIssue } from "types";
+import { IIssueUnGroupedStructure } from "store/issue";
 
-type Props = { disableUserActions: boolean };
-
-export const ViewIssuesGanttChartView: React.FC<Props> = ({ disableUserActions }) => {
+export const CycleGanttLayout: React.FC = observer(() => {
   const router = useRouter();
-  const { workspaceSlug, projectId, viewId } = router.query;
+  const { workspaceSlug, projectId } = router.query;
 
-  const { user } = useUser();
   const { projectDetails } = useProjectDetails();
 
-  const { ganttIssues, mutateGanttIssues } = useGanttChartViewIssues(
-    workspaceSlug as string,
-    projectId as string,
-    viewId as string
-  );
+  const { cycleIssue: cycleIssueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = cycleIssueStore.getIssues;
 
   const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
 
   return (
     <>
       <IssuePeekOverview
-        handleMutation={() => mutateGanttIssues()}
         projectId={projectId?.toString() ?? ""}
         workspaceSlug={workspaceSlug?.toString() ?? ""}
-        readOnly={disableUserActions}
+        readOnly={!isAllowed}
       />
       <div className="w-full h-full">
         <GanttChartRoot
           border={false}
           title="Issues"
           loaderTitle="Issues"
-          blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
-          blockUpdateHandler={(block, payload) =>
-            updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
-          }
-          SidebarBlockRender={IssueGanttSidebarBlock}
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          blockUpdateHandler={(block, payload) => {
+            // TODO: update mutation logic
+            // updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
+          }}
           BlockRender={IssueGanttBlock}
+          SidebarBlockRender={IssueGanttSidebarBlock}
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
           enableBlockMove={isAllowed}
-          enableReorder={isAllowed}
+          enableReorder={appliedDisplayFilters.order_by === "sort_order" && isAllowed}
         />
       </div>
     </>
   );
-};
+});
diff --git a/web/components/issues/issue-layouts/gantt/index.ts b/web/components/issues/issue-layouts/gantt/index.ts
new file mode 100644
index 000000000..d8cfadd48
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/index.ts
@@ -0,0 +1,5 @@
+export * from "./blocks";
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./project-view-root";
+export * from "./root";
diff --git a/web/components/issues/issue-layouts/gantt/module-root.tsx b/web/components/issues/issue-layouts/gantt/module-root.tsx
new file mode 100644
index 000000000..4158b663b
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/module-root.tsx
@@ -0,0 +1,54 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock, IssuePeekOverview } from "components/issues";
+// types
+import { IIssueUnGroupedStructure } from "store/issue";
+
+export const ModuleGanttLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { projectDetails } = useProjectDetails();
+
+  const { moduleIssue: moduleIssueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = moduleIssueStore.getIssues;
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <IssuePeekOverview
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={!isAllowed}
+      />
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          blockUpdateHandler={(block, payload) => {
+            // TODO: update mutation logic
+            // updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
+          }}
+          BlockRender={IssueGanttBlock}
+          SidebarBlockRender={IssueGanttSidebarBlock}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          enableReorder={appliedDisplayFilters.order_by === "sort_order" && isAllowed}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/gantt-chart/layout.tsx b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
similarity index 51%
rename from web/components/issues/gantt-chart/layout.tsx
rename to web/components/issues/issue-layouts/gantt/project-view-root.tsx
index ed4cd3d70..095137996 100644
--- a/web/components/issues/gantt-chart/layout.tsx
+++ b/web/components/issues/issue-layouts/gantt/project-view-root.tsx
@@ -1,63 +1,56 @@
 import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
 
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
-import useIssuesView from "hooks/use-issues-view";
-import useUser from "hooks/use-user";
-import useGanttChartIssues from "hooks/gantt-chart/issue-view";
-import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
 import useProjectDetails from "hooks/use-project-details";
 // components
 import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
 import { IssueGanttBlock, IssueGanttSidebarBlock, IssuePeekOverview } from "components/issues";
 // types
-import { IIssue } from "types";
+import { IIssueUnGroupedStructure } from "store/issue";
 
-type Props = {
-  disableUserActions: boolean;
-};
-
-export const IssueGanttChartView: React.FC<Props> = ({ disableUserActions }) => {
+export const ProjectViewGanttLayout: React.FC = observer(() => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { displayFilters } = useIssuesView();
-
-  const { user } = useUser();
   const { projectDetails } = useProjectDetails();
 
-  const { ganttIssues, mutateGanttIssues } = useGanttChartIssues(
-    workspaceSlug as string,
-    projectId as string
-  );
+  const { projectViewIssues: projectViewIssuesStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = projectViewIssuesStore.getIssues;
 
   const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
 
   return (
     <>
       <IssuePeekOverview
-        handleMutation={() => mutateGanttIssues()}
         projectId={projectId?.toString() ?? ""}
         workspaceSlug={workspaceSlug?.toString() ?? ""}
-        readOnly={disableUserActions}
+        readOnly={!isAllowed}
       />
       <div className="w-full h-full">
         <GanttChartRoot
           border={false}
           title="Issues"
           loaderTitle="Issues"
-          blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
-          blockUpdateHandler={(block, payload) =>
-            updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
-          }
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          blockUpdateHandler={(block, payload) => {
+            // TODO: update mutation logic
+            // updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
+          }}
           BlockRender={IssueGanttBlock}
           SidebarBlockRender={IssueGanttSidebarBlock}
           enableBlockLeftResize={isAllowed}
           enableBlockRightResize={isAllowed}
           enableBlockMove={isAllowed}
-          enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
-          bottomSpacing
+          enableReorder={appliedDisplayFilters.order_by === "sort_order" && isAllowed}
         />
       </div>
     </>
   );
-};
+});
diff --git a/web/components/issues/issue-layouts/gantt/root.tsx b/web/components/issues/issue-layouts/gantt/root.tsx
new file mode 100644
index 000000000..8277aa52a
--- /dev/null
+++ b/web/components/issues/issue-layouts/gantt/root.tsx
@@ -0,0 +1,54 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+import useProjectDetails from "hooks/use-project-details";
+// components
+import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
+import { IssueGanttBlock, IssueGanttSidebarBlock, IssuePeekOverview } from "components/issues";
+// types
+import { IIssueUnGroupedStructure } from "store/issue";
+
+export const GanttLayout: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { projectDetails } = useProjectDetails();
+
+  const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const appliedDisplayFilters = issueFilterStore.userDisplayFilters;
+
+  const issues = issueStore.getIssues;
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <IssuePeekOverview
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={!isAllowed}
+      />
+      <div className="w-full h-full">
+        <GanttChartRoot
+          border={false}
+          title="Issues"
+          loaderTitle="Issues"
+          blocks={issues ? renderIssueBlocksStructure(issues as IIssueUnGroupedStructure) : null}
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          blockUpdateHandler={(block, payload) => {
+            // TODO: update mutation logic
+            // updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
+          }}
+          BlockRender={IssueGanttBlock}
+          SidebarBlockRender={IssueGanttSidebarBlock}
+          enableBlockLeftResize={isAllowed}
+          enableBlockRightResize={isAllowed}
+          enableBlockMove={isAllowed}
+          enableReorder={appliedDisplayFilters.order_by === "sort_order" && isAllowed}
+        />
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/index.ts b/web/components/issues/issue-layouts/index.ts
new file mode 100644
index 000000000..e9c11aed8
--- /dev/null
+++ b/web/components/issues/issue-layouts/index.ts
@@ -0,0 +1,11 @@
+// filters
+export * from "./filters";
+
+// layouts
+export * from "./list";
+export * from "./calendar";
+export * from "./gantt";
+export * from "./kanban";
+export * from "./spreadsheet";
+
+export * from "./roots";
diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx
new file mode 100644
index 000000000..c65680dc1
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/block.tsx
@@ -0,0 +1,73 @@
+// react beautiful dnd
+import { Draggable } from "@hello-pangea/dnd";
+// components
+import { KanBanProperties } from "./properties";
+
+interface IssueBlockProps {
+  sub_group_id: string;
+  columnId: string;
+  issues: any;
+  isDragDisabled: boolean;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
+}
+
+export const IssueBlock = ({
+  sub_group_id,
+  columnId,
+  issues,
+  isDragDisabled,
+  handleIssues,
+  display_properties,
+}: IssueBlockProps) => (
+  <>
+    {issues && issues.length > 0 ? (
+      <>
+        {issues.map((issue: any, index: any) => (
+          <Draggable
+            key={`issue-blocks-${sub_group_id}-${columnId}-${issue.id}`}
+            draggableId={`${issue.id}`}
+            index={index}
+            isDragDisabled={isDragDisabled}
+          >
+            {(provided: any, snapshot: any) => (
+              <div
+                key={issue.id}
+                className="p-1.5 hover:cursor-default"
+                {...provided.draggableProps}
+                {...provided.dragHandleProps}
+                ref={provided.innerRef}
+              >
+                <div
+                  className={`text-sm rounded p-2 px-3 shadow-custom-shadow-2xs space-y-[8px] border transition-all bg-custom-background-100 hover:cursor-grab ${
+                    snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`
+                  }`}
+                >
+                  {display_properties && display_properties?.key && (
+                    <div className="text-xs line-clamp-1 text-custom-text-300">ONE-{issue.sequence_id}</div>
+                  )}
+                  <div className="line-clamp-2 h-[40px] text-sm font-medium text-custom-text-100">{issue.name}</div>
+                  <div>
+                    <KanBanProperties
+                      sub_group_id={sub_group_id}
+                      columnId={columnId}
+                      issue={issue}
+                      handleIssues={handleIssues}
+                      display_properties={display_properties}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+          </Draggable>
+        ))}
+      </>
+    ) : (
+      !isDragDisabled && (
+        <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+          {/* <div className="text-custom-text-300 text-sm">Drop here</div> */}
+        </div>
+      )
+    )}
+  </>
+);
diff --git a/web/components/issues/issue-layouts/kanban/cycle-root.tsx b/web/components/issues/issue-layouts/kanban/cycle-root.tsx
new file mode 100644
index 000000000..728d4f02f
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/cycle-root.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+// react beautiful dnd
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { KanBanSwimLanes } from "./swimlanes";
+import { KanBan } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface ICycleKanBanLayout {}
+
+export const CycleKanBanLayout: React.FC = observer(() => {
+  const {
+    cycleIssue: cycleIssueStore,
+    issueFilter: issueFilterStore,
+    cycleIssueKanBanView: cycleIssueKanBanViewStore,
+  }: RootStore = useMobxStore();
+
+  const issues = cycleIssueStore?.getIssues;
+
+  const sub_group_by: string | null = issueFilterStore?.userDisplayFilters?.sub_group_by || null;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const onDragEnd = (result: any) => {
+    if (!result) return;
+
+    if (
+      result.destination &&
+      result.source &&
+      result.destination.droppableId === result.source.droppableId &&
+      result.destination.index === result.source.index
+    )
+      return;
+
+    currentKanBanView === "default"
+      ? cycleIssueKanBanViewStore?.handleDragDrop(result.source, result.destination)
+      : cycleIssueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
+  };
+
+  const updateIssue = (sub_group_by: string | null, group_by: string | null, issue: any) => {
+    cycleIssueStore.updateIssueStructure(group_by, sub_group_by, issue);
+  };
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    cycleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  return (
+    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+      <DragDropContext onDragEnd={onDragEnd}>
+        {currentKanBanView === "default" ? (
+          <KanBan
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+            kanBanToggle={cycleIssueKanBanViewStore?.kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <KanBanSwimLanes
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+            kanBanToggle={cycleIssueKanBanViewStore?.kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/default.tsx b/web/components/issues/issue-layouts/kanban/default.tsx
new file mode 100644
index 000000000..e1400ab7e
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/default.tsx
@@ -0,0 +1,232 @@
+import React from "react";
+// react beautiful dnd
+import { Droppable } from "@hello-pangea/dnd";
+// components
+import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
+import { IssueBlock } from "./block";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
+// mobx
+import { observer } from "mobx-react-lite";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IGroupByKanBan {
+  issues: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  sub_group_id: string;
+  list: any;
+  listKey: string;
+  isDragDisabled: boolean;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
+  ({
+    issues,
+    sub_group_by,
+    group_by,
+    sub_group_id = "null",
+    list,
+    listKey,
+    isDragDisabled,
+    handleIssues,
+    display_properties,
+    kanBanToggle,
+    handleKanBanToggle,
+  }) => {
+    const verticalAlignPosition = (_list: any) =>
+      kanBanToggle?.groupByHeaderMinMax.includes(getValueFromObject(_list, listKey) as string);
+
+    return (
+      <div className="relative w-full h-full flex">
+        {list &&
+          list.length > 0 &&
+          list.map((_list: any) => (
+            <div className={`flex-shrink-0 flex flex-col ${!verticalAlignPosition(_list) ? `w-[340px]` : ``}`}>
+              {sub_group_by === null && (
+                <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2]">
+                  <KanBanGroupByHeaderRoot
+                    column_id={getValueFromObject(_list, listKey) as string}
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    issues_count={issues?.[getValueFromObject(_list, listKey) as string]?.length || 0}
+                    kanBanToggle={kanBanToggle}
+                    handleKanBanToggle={handleKanBanToggle}
+                  />
+                </div>
+              )}
+
+              <div
+                className={`min-h-[150px] h-full ${
+                  verticalAlignPosition(_list) ? `w-[0px] overflow-hidden` : `w-full transition-all`
+                }`}
+              >
+                <Droppable droppableId={`${getValueFromObject(_list, listKey) as string}__${sub_group_id}`}>
+                  {(provided: any, snapshot: any) => (
+                    <div
+                      className={`w-full h-full relative transition-all ${
+                        snapshot.isDraggingOver ? `bg-custom-background-80` : ``
+                      }`}
+                      {...provided.droppableProps}
+                      ref={provided.innerRef}
+                    >
+                      {issues ? (
+                        <IssueBlock
+                          sub_group_id={sub_group_id}
+                          columnId={getValueFromObject(_list, listKey) as string}
+                          issues={issues[getValueFromObject(_list, listKey) as string]}
+                          isDragDisabled={isDragDisabled}
+                          handleIssues={handleIssues}
+                          display_properties={display_properties}
+                        />
+                      ) : (
+                        isDragDisabled && (
+                          <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+                            {/* <div className="text-custom-text-300 text-sm">Drop here</div> */}
+                          </div>
+                        )
+                      )}
+                      {provided.placeholder}
+                    </div>
+                  )}
+                </Droppable>
+              </div>
+            </div>
+          ))}
+      </div>
+    );
+  }
+);
+
+export interface IKanBan {
+  issues: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  sub_group_id?: string;
+  handleDragDrop?: (result: any) => void | undefined;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const KanBan: React.FC<IKanBan> = observer(
+  ({
+    issues,
+    sub_group_by,
+    group_by,
+    sub_group_id = "null",
+    handleIssues,
+    display_properties,
+    kanBanToggle,
+    handleKanBanToggle,
+  }) => {
+    const { project: projectStore, issueKanBanView: issueKanBanViewStore }: RootStore = useMobxStore();
+
+    return (
+      <div className="relative w-full h-full">
+        {group_by && group_by === "state" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectStates}
+            listKey={`id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "state_detail.group" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={ISSUE_STATE_GROUPS}
+            listKey={`key`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "priority" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={ISSUE_PRIORITIES}
+            listKey={`key`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "labels" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectLabels}
+            listKey={`id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "assignees" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectMembers}
+            listKey={`member.id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {group_by && group_by === "created_by" && (
+          <GroupByKanBan
+            issues={issues}
+            group_by={group_by}
+            sub_group_by={sub_group_by}
+            sub_group_id={sub_group_id}
+            list={projectStore?.projectMembers}
+            listKey={`member.id`}
+            isDragDisabled={!issueKanBanViewStore?.canUserDragDrop}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+      </div>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/assignee.tsx b/web/components/issues/issue-layouts/kanban/headers/assignee.tsx
new file mode 100644
index 000000000..f29bf6611
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/assignee.tsx
@@ -0,0 +1,56 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+import { Avatar } from "components/ui";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IAssigneesHeader {
+  column_id: string;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const Icon = ({ user }: any) => <Avatar user={user} height="22px" width="22px" fontSize="12px" />;
+
+export const AssigneesHeader: React.FC<IAssigneesHeader> = observer(
+  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const assignee = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+
+    return (
+      <>
+        {assignee &&
+          (sub_group_by && header_type === "sub_group_by" ? (
+            <HeaderSubGroupByCard
+              column_id={column_id}
+              icon={<Icon user={assignee?.member} />}
+              title={assignee?.member?.display_name || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ) : (
+            <HeaderGroupByCard
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              column_id={column_id}
+              icon={<Icon user={assignee?.member} />}
+              title={assignee?.member?.display_name || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ))}
+      </>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/created_by.tsx b/web/components/issues/issue-layouts/kanban/headers/created_by.tsx
new file mode 100644
index 000000000..678837d1b
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/created_by.tsx
@@ -0,0 +1,54 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+import { Icon } from "./assignee";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface ICreatedByHeader {
+  column_id: string;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const CreatedByHeader: React.FC<ICreatedByHeader> = observer(
+  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const createdBy = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+
+    return (
+      <>
+        {createdBy &&
+          (sub_group_by && header_type === "sub_group_by" ? (
+            <HeaderSubGroupByCard
+              column_id={column_id}
+              icon={<Icon user={createdBy?.member} />}
+              title={createdBy?.member?.display_name || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ) : (
+            <HeaderGroupByCard
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              column_id={column_id}
+              icon={<Icon user={createdBy?.member} />}
+              title={createdBy?.member?.display_name || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ))}
+      </>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
new file mode 100644
index 000000000..73f125b88
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-card.tsx
@@ -0,0 +1,55 @@
+import React, { FC } from "react";
+// lucide icons
+import { Minimize2, Maximize2, Circle } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+
+interface IHeaderGroupByCard {
+  sub_group_by: string | null;
+  group_by: string | null;
+  column_id: string;
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const HeaderGroupByCard: FC<IHeaderGroupByCard> = observer((props) => {
+  const { sub_group_by, column_id, icon, title, count, kanBanToggle, handleKanBanToggle } = props;
+  const verticalAlignPosition = kanBanToggle?.groupByHeaderMinMax.includes(column_id);
+
+  return (
+    <div
+      className={`flex-shrink-0 relative flex gap-2 p-1.5 ${
+        verticalAlignPosition ? `flex-col items-center w-[44px]` : `flex-row items-center w-full`
+      }`}
+    >
+      <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
+        {icon ? icon : <Circle width={14} strokeWidth={2} />}
+      </div>
+
+      <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>
+        <div className={`font-medium line-clamp-1 text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}>
+          {title}
+        </div>
+        <div className={`text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}>
+          {count || 0}
+        </div>
+      </div>
+
+      {sub_group_by === null && (
+        <div
+          className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+          onClick={() => handleKanBanToggle("groupByHeaderMinMax", column_id)}
+        >
+          {verticalAlignPosition ? <Maximize2 width={14} strokeWidth={2} /> : <Minimize2 width={14} strokeWidth={2} />}
+        </div>
+      )}
+
+      {/* <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+          <Plus width={14} strokeWidth={2} />
+        </div> */}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx b/web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx
new file mode 100644
index 000000000..25d4b6c8c
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/group-by-root.tsx
@@ -0,0 +1,91 @@
+// components
+import { StateHeader } from "./state";
+import { StateGroupHeader } from "./state-group";
+import { AssigneesHeader } from "./assignee";
+import { PriorityHeader } from "./priority";
+import { LabelHeader } from "./label";
+import { CreatedByHeader } from "./created_by";
+// mobx
+import { observer } from "mobx-react-lite";
+
+export interface IKanBanGroupByHeaderRoot {
+  column_id: string;
+  sub_group_by: string | null;
+  group_by: string | null;
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = observer(
+  ({ column_id, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle }) => (
+    <>
+      {group_by && group_by === "state" && (
+        <StateHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {group_by && group_by === "state_detail.group" && (
+        <StateGroupHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {group_by && group_by === "priority" && (
+        <PriorityHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {group_by && group_by === "labels" && (
+        <LabelHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {group_by && group_by === "assignees" && (
+        <AssigneesHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {group_by && group_by === "created_by" && (
+        <CreatedByHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+    </>
+  )
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/label.tsx b/web/components/issues/issue-layouts/kanban/headers/label.tsx
new file mode 100644
index 000000000..21dbf66de
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/label.tsx
@@ -0,0 +1,57 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface ILabelHeader {
+  column_id: string;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+const Icon = ({ color }: any) => (
+  <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
+);
+
+export const LabelHeader: React.FC<ILabelHeader> = observer(
+  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const label = (column_id && projectStore?.getProjectLabelById(column_id)) ?? null;
+
+    return (
+      <>
+        {label &&
+          (sub_group_by && header_type === "sub_group_by" ? (
+            <HeaderSubGroupByCard
+              column_id={column_id}
+              icon={<Icon color={label?.color} />}
+              title={label?.name || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ) : (
+            <HeaderGroupByCard
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              column_id={column_id}
+              icon={<Icon />}
+              title={label?.name || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ))}
+      </>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/priority.tsx b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
new file mode 100644
index 000000000..d77b93632
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/priority.tsx
@@ -0,0 +1,78 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// lucide icons
+import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+// constants
+import { issuePriorityByKey } from "constants/issue";
+
+export interface IPriorityHeader {
+  column_id: string;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+const Icon = ({ priority }: any) => (
+  <div className="w-full h-full">
+    {priority === "urgent" ? (
+      <div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <AlertCircle size={14} strokeWidth={2} />
+      </div>
+    ) : priority === "high" ? (
+      <div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalHigh size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "medium" ? (
+      <div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalMedium size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "low" ? (
+      <div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalLow size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : (
+      <div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <Ban size={14} strokeWidth={2} />
+      </div>
+    )}
+  </div>
+);
+
+export const PriorityHeader: React.FC<IPriorityHeader> = observer(
+  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
+    const priority = column_id && issuePriorityByKey(column_id);
+
+    return (
+      <>
+        {priority &&
+          (sub_group_by && header_type === "sub_group_by" ? (
+            <HeaderSubGroupByCard
+              column_id={column_id}
+              icon={<Icon priority={priority?.key} />}
+              title={priority?.key || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ) : (
+            <HeaderGroupByCard
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              column_id={column_id}
+              icon={<Icon priority={priority?.key} />}
+              title={priority?.key || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ))}
+      </>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/state-group.tsx b/web/components/issues/issue-layouts/kanban/headers/state-group.tsx
new file mode 100644
index 000000000..d4efc909a
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/state-group.tsx
@@ -0,0 +1,59 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+import { StateGroupIcon } from "components/icons";
+// constants
+import { issueStateGroupByKey } from "constants/issue";
+
+export interface IStateGroupHeader {
+  column_id: string;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
+  <div className="w-[14px] h-[14px] rounded-full">
+    <StateGroupIcon stateGroup={stateGroup} color={color || null} width="14" height="14" />
+  </div>
+);
+
+export const StateGroupHeader: React.FC<IStateGroupHeader> = observer(
+  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
+    const stateGroup = column_id && issueStateGroupByKey(column_id);
+
+    console.log("stateGroup", stateGroup);
+
+    return (
+      <>
+        {stateGroup &&
+          (sub_group_by && header_type === "sub_group_by" ? (
+            <HeaderSubGroupByCard
+              column_id={column_id}
+              icon={<Icon stateGroup={stateGroup?.key} />}
+              title={stateGroup?.key || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ) : (
+            <HeaderGroupByCard
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              column_id={column_id}
+              icon={<Icon stateGroup={stateGroup?.key} />}
+              title={stateGroup?.key || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ))}
+      </>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/state.tsx b/web/components/issues/issue-layouts/kanban/headers/state.tsx
new file mode 100644
index 000000000..f95ad3592
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/state.tsx
@@ -0,0 +1,54 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { HeaderSubGroupByCard } from "./sub-group-by-card";
+import { Icon } from "./state-group";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IStateHeader {
+  column_id: string;
+  sub_group_by: string | null;
+  group_by: string | null;
+  header_type: "group_by" | "sub_group_by";
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const StateHeader: React.FC<IStateHeader> = observer(
+  ({ column_id, sub_group_by, group_by, header_type, issues_count, kanBanToggle, handleKanBanToggle }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const state = (column_id && projectStore?.getProjectStateById(column_id)) ?? null;
+
+    return (
+      <>
+        {state &&
+          (sub_group_by && header_type === "sub_group_by" ? (
+            <HeaderSubGroupByCard
+              column_id={column_id}
+              icon={<Icon stateGroup={state?.group} color={state?.color} />}
+              title={state?.name || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ) : (
+            <HeaderGroupByCard
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              column_id={column_id}
+              icon={<Icon stateGroup={state?.group} color={state?.color} />}
+              title={state?.name || ""}
+              count={issues_count}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          ))}
+      </>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
new file mode 100644
index 000000000..e9b0775f3
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+// lucide icons
+import { Circle, ChevronDown, ChevronUp } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+
+interface IHeaderSubGroupByCard {
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+  column_id: string;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const HeaderSubGroupByCard = observer(
+  ({ icon, title, count, column_id, kanBanToggle, handleKanBanToggle }: IHeaderSubGroupByCard) => (
+    <div className={`flex-shrink-0 relative flex gap-2 rounded-sm flex-row items-center w-full p-1.5`}>
+      <div
+        className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all"
+        onClick={() => handleKanBanToggle("subgroupByIssuesVisibility", column_id)}
+      >
+        {kanBanToggle?.subgroupByIssuesVisibility.includes(column_id) ? (
+          <ChevronDown width={14} strokeWidth={2} />
+        ) : (
+          <ChevronUp width={14} strokeWidth={2} />
+        )}
+      </div>
+
+      <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
+        {icon ? icon : <Circle width={14} strokeWidth={2} />}
+      </div>
+
+      <div className="flex-shrink-0 flex items-center gap-1 text-sm">
+        <div className="line-clamp-1 text-custom-text-100">{title}</div>
+        <div className="pl-2 text-sm font-medium text-custom-text-300">{count || 0}</div>
+      </div>
+    </div>
+  )
+);
diff --git a/web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx
new file mode 100644
index 000000000..1ae724a27
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/headers/sub-group-by-root.tsx
@@ -0,0 +1,91 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { StateHeader } from "./state";
+import { StateGroupHeader } from "./state-group";
+import { AssigneesHeader } from "./assignee";
+import { PriorityHeader } from "./priority";
+import { LabelHeader } from "./label";
+import { CreatedByHeader } from "./created_by";
+
+export interface IKanBanSubGroupByHeaderRoot {
+  column_id: string;
+  sub_group_by: string | null;
+  group_by: string | null;
+  issues_count: number;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const KanBanSubGroupByHeaderRoot: React.FC<IKanBanSubGroupByHeaderRoot> = observer(
+  ({ column_id, sub_group_by, group_by, issues_count, kanBanToggle, handleKanBanToggle }) => (
+    <>
+      {sub_group_by && sub_group_by === "state" && (
+        <StateHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {sub_group_by && sub_group_by === "state_detail.group" && (
+        <StateGroupHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {sub_group_by && sub_group_by === "priority" && (
+        <PriorityHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {sub_group_by && sub_group_by === "labels" && (
+        <LabelHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {sub_group_by && sub_group_by === "assignees" && (
+        <AssigneesHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+      {sub_group_by && sub_group_by === "created_by" && (
+        <CreatedByHeader
+          column_id={column_id}
+          sub_group_by={sub_group_by}
+          group_by={group_by}
+          header_type={`sub_group_by`}
+          issues_count={issues_count}
+          kanBanToggle={kanBanToggle}
+          handleKanBanToggle={handleKanBanToggle}
+        />
+      )}
+    </>
+  )
+);
diff --git a/web/components/issues/issue-layouts/kanban/index.ts b/web/components/issues/issue-layouts/kanban/index.ts
new file mode 100644
index 000000000..a46683af6
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/index.ts
@@ -0,0 +1,3 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./root";
diff --git a/web/components/issues/issue-layouts/kanban/module-root.tsx b/web/components/issues/issue-layouts/kanban/module-root.tsx
new file mode 100644
index 000000000..5bdc09706
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/module-root.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+// react beautiful dnd
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { KanBanSwimLanes } from "./swimlanes";
+import { KanBan } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IModuleKanBanLayout {}
+
+export const ModuleKanBanLayout: React.FC = observer(() => {
+  const {
+    moduleIssue: moduleIssueStore,
+    issueFilter: issueFilterStore,
+    moduleIssueKanBanView: moduleIssueKanBanViewStore,
+  }: RootStore = useMobxStore();
+
+  const issues = moduleIssueStore?.getIssues;
+
+  const sub_group_by: string | null = issueFilterStore?.userDisplayFilters?.sub_group_by || null;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const onDragEnd = (result: any) => {
+    if (!result) return;
+
+    if (
+      result.destination &&
+      result.source &&
+      result.destination.droppableId === result.source.droppableId &&
+      result.destination.index === result.source.index
+    )
+      return;
+
+    currentKanBanView === "default"
+      ? moduleIssueKanBanViewStore?.handleDragDrop(result.source, result.destination)
+      : moduleIssueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
+  };
+
+  const updateIssue = (sub_group_by: string | null, group_by: string | null, issue: any) => {
+    moduleIssueStore.updateIssueStructure(group_by, sub_group_by, issue);
+  };
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    moduleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  return (
+    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+      <DragDropContext onDragEnd={onDragEnd}>
+        {currentKanBanView === "default" ? (
+          <KanBan
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+            kanBanToggle={moduleIssueKanBanViewStore?.kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <KanBanSwimLanes
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+            kanBanToggle={moduleIssueKanBanViewStore?.kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/properties.tsx b/web/components/issues/issue-layouts/kanban/properties.tsx
new file mode 100644
index 000000000..cefde1798
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/properties.tsx
@@ -0,0 +1,199 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// lucide icons
+import { Layers, Link, Paperclip } from "lucide-react";
+// components
+import { IssuePropertyState } from "../properties/state";
+import { IssuePropertyPriority } from "../properties/priority";
+import { IssuePropertyLabels } from "../properties/labels";
+import { IssuePropertyAssignee } from "../properties/assignee";
+import { IssuePropertyEstimates } from "../properties/estimates";
+import { IssuePropertyStartDate } from "../properties/date";
+import { Tooltip } from "@plane/ui";
+
+export interface IKanBanProperties {
+  sub_group_id: string;
+  columnId: string;
+  issue: any;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
+}
+
+export const KanBanProperties: React.FC<IKanBanProperties> = observer(
+  ({ sub_group_id, columnId: group_id, issue, handleIssues, display_properties }) => {
+    const handleState = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, state: id }
+        );
+    };
+
+    const handlePriority = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, priority: id }
+        );
+    };
+
+    const handleLabel = (ids: string[]) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, labels: ids }
+        );
+    };
+
+    const handleAssignee = (ids: string[]) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, assignees: ids }
+        );
+    };
+
+    const handleStartDate = (date: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, start_date: date }
+        );
+    };
+
+    const handleTargetDate = (date: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, target_date: date }
+        );
+    };
+
+    const handleEstimate = (id: string) => {
+      if (handleIssues)
+        handleIssues(
+          !sub_group_id && sub_group_id === "null" ? null : sub_group_id,
+          !group_id && group_id === "null" ? null : group_id,
+          { ...issue, estimate_point: id }
+        );
+    };
+
+    return (
+      <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
+        {/* basic properties */}
+        {/* state */}
+        {display_properties && display_properties?.state && (
+          <IssuePropertyState
+            value={issue?.state || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handleState(id)}
+            disabled={false}
+          />
+        )}
+
+        {/* priority */}
+        {display_properties && display_properties?.priority && (
+          <IssuePropertyPriority
+            value={issue?.priority || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handlePriority(id)}
+            disabled={false}
+          />
+        )}
+
+        {/* label */}
+        {display_properties && display_properties?.labels && (
+          <IssuePropertyLabels
+            value={issue?.labels || null}
+            dropdownArrow={false}
+            onChange={(ids: string[]) => handleLabel(ids)}
+            disabled={false}
+          />
+        )}
+
+        {/* assignee */}
+        {display_properties && display_properties?.assignee && (
+          <IssuePropertyAssignee
+            value={issue?.assignees || null}
+            dropdownArrow={false}
+            onChange={(ids: string[]) => handleAssignee(ids)}
+            disabled={false}
+          />
+        )}
+
+        {/* start date */}
+        {display_properties && display_properties?.start_date && (
+          <IssuePropertyStartDate
+            value={issue?.start_date || null}
+            onChange={(date: string) => handleStartDate(date)}
+            disabled={false}
+          />
+        )}
+
+        {/* target/due date */}
+        {display_properties && display_properties?.due_date && (
+          <IssuePropertyStartDate
+            value={issue?.target_date || null}
+            onChange={(date: string) => handleTargetDate(date)}
+            disabled={false}
+          />
+        )}
+
+        {/* estimates */}
+        {display_properties && display_properties?.estimate && (
+          <IssuePropertyEstimates
+            value={issue?.estimate_point?.toString() || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handleEstimate(id)}
+            disabled={false}
+            workspaceSlug={issue?.workspace_detail?.slug || null}
+            projectId={issue?.project_detail?.id || null}
+          />
+        )}
+
+        {/* extra render properties */}
+        {/* sub-issues */}
+        {display_properties && display_properties?.sub_issue_count && (
+          <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+                <Layers width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
+            </div>
+          </Tooltip>
+        )}
+
+        {/* attachments */}
+        {display_properties && display_properties?.attachment_count && (
+          <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                <Paperclip width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
+            </div>
+          </Tooltip>
+        )}
+
+        {/* link */}
+        {display_properties && display_properties?.link && (
+          <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+                <Link width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
+            </div>
+          </Tooltip>
+        )}
+      </div>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/root.tsx b/web/components/issues/issue-layouts/kanban/root.tsx
new file mode 100644
index 000000000..6e93e0b23
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/root.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+// react beautiful dnd
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { KanBanSwimLanes } from "./swimlanes";
+import { KanBan } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IKanBanLayout {}
+
+export const KanBanLayout: React.FC = observer(() => {
+  const {
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    issueKanBanView: issueKanBanViewStore,
+  }: RootStore = useMobxStore();
+
+  const issues = issueStore?.getIssues;
+
+  const sub_group_by: string | null = issueFilterStore?.userDisplayFilters?.sub_group_by || null;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const onDragEnd = (result: any) => {
+    if (!result) return;
+
+    if (
+      result.destination &&
+      result.source &&
+      result.destination.droppableId === result.source.droppableId &&
+      result.destination.index === result.source.index
+    )
+      return;
+
+    currentKanBanView === "default"
+      ? issueKanBanViewStore?.handleDragDrop(result.source, result.destination)
+      : issueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
+  };
+
+  const updateIssue = (sub_group_by: string | null, group_by: string | null, issue: any) => {
+    issueStore.updateIssueStructure(group_by, sub_group_by, issue);
+  };
+
+  const handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    issueKanBanViewStore.handleKanBanToggle(toggle, value);
+  };
+
+  return (
+    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+      <DragDropContext onDragEnd={onDragEnd}>
+        {currentKanBanView === "default" ? (
+          <KanBan
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+            kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        ) : (
+          <KanBanSwimLanes
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+            kanBanToggle={issueKanBanViewStore?.kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
new file mode 100644
index 000000000..baf8b36b2
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@@ -0,0 +1,305 @@
+import React from "react";
+// components
+import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
+import { KanBanSubGroupByHeaderRoot } from "./headers/sub-group-by-root";
+import { KanBan } from "./default";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
+// mobx
+import { observer } from "mobx-react-lite";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+interface ISubGroupSwimlaneHeader {
+  issues: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  list: any;
+  listKey: string;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
+  issues,
+  sub_group_by,
+  group_by,
+  list,
+  listKey,
+  kanBanToggle,
+  handleKanBanToggle,
+}) => {
+  const calculateIssueCount = (column_id: string) => {
+    let issueCount = 0;
+    issues &&
+      Object.keys(issues)?.forEach((_issueKey: any) => {
+        issueCount += issues?.[_issueKey]?.[column_id]?.length || 0;
+      });
+    return issueCount;
+  };
+
+  return (
+    <div className="relative w-full min-h-full h-max flex items-center">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: any) => (
+          <div className="flex-shrink-0 flex flex-col w-[340px]">
+            <KanBanGroupByHeaderRoot
+              column_id={getValueFromObject(_list, listKey) as string}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          </div>
+        ))}
+    </div>
+  );
+};
+
+interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
+  issues: any;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer(
+  ({
+    issues,
+    sub_group_by,
+    group_by,
+    list,
+    listKey,
+    handleIssues,
+    display_properties,
+    kanBanToggle,
+    handleKanBanToggle,
+  }) => {
+    const calculateIssueCount = (column_id: string) => {
+      let issueCount = 0;
+      issues?.[column_id] &&
+        Object.keys(issues?.[column_id])?.forEach((_list: any) => {
+          issueCount += issues?.[column_id]?.[_list]?.length || 0;
+        });
+      return issueCount;
+    };
+
+    return (
+      <div className="relative w-full min-h-full h-max">
+        {list &&
+          list.length > 0 &&
+          list.map((_list: any) => (
+            <div className="flex-shrink-0 flex flex-col">
+              <div className="sticky top-[50px] w-full z-[1] bg-custom-background-90 flex items-center py-1">
+                <div className="flex-shrink-0 sticky left-0 bg-custom-background-90 pr-2">
+                  <KanBanSubGroupByHeaderRoot
+                    column_id={getValueFromObject(_list, listKey) as string}
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    issues_count={calculateIssueCount(getValueFromObject(_list, listKey) as string)}
+                    kanBanToggle={kanBanToggle}
+                    handleKanBanToggle={handleKanBanToggle}
+                  />
+                </div>
+                <div className="w-full border-b border-custom-border-400 border-dashed" />
+              </div>
+              {!kanBanToggle?.subgroupByIssuesVisibility.includes(getValueFromObject(_list, listKey) as string) && (
+                <div className="relative">
+                  <KanBan
+                    issues={issues?.[getValueFromObject(_list, listKey) as string]}
+                    sub_group_by={sub_group_by}
+                    group_by={group_by}
+                    sub_group_id={getValueFromObject(_list, listKey) as string}
+                    handleIssues={handleIssues}
+                    display_properties={display_properties}
+                    kanBanToggle={kanBanToggle}
+                    handleKanBanToggle={handleKanBanToggle}
+                  />
+                </div>
+              )}
+            </div>
+          ))}
+      </div>
+    );
+  }
+);
+
+export interface IKanBanSwimLanes {
+  issues: any;
+  sub_group_by: string | null;
+  group_by: string | null;
+  handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
+  display_properties: any;
+  kanBanToggle: any;
+  handleKanBanToggle: any;
+}
+
+export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer(
+  ({ issues, sub_group_by, group_by, handleIssues, display_properties, kanBanToggle, handleKanBanToggle }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    return (
+      <div className="relative">
+        <div className="sticky top-0 z-[2] bg-custom-background-90 h-[50px]">
+          {group_by && group_by === "state" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectStates}
+              listKey={`id`}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          )}
+
+          {group_by && group_by === "state_detail.group" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={ISSUE_STATE_GROUPS}
+              listKey={`key`}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          )}
+
+          {group_by && group_by === "priority" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={ISSUE_PRIORITIES}
+              listKey={`key`}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          )}
+
+          {group_by && group_by === "labels" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectLabels}
+              listKey={`id`}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          )}
+
+          {group_by && group_by === "assignees" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectMembers}
+              listKey={`member.id`}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          )}
+
+          {group_by && group_by === "created_by" && (
+            <SubGroupSwimlaneHeader
+              issues={issues}
+              sub_group_by={sub_group_by}
+              group_by={group_by}
+              list={projectStore?.projectMembers}
+              listKey={`member.id`}
+              kanBanToggle={kanBanToggle}
+              handleKanBanToggle={handleKanBanToggle}
+            />
+          )}
+        </div>
+
+        {sub_group_by && sub_group_by === "state" && (
+          <SubGroupSwimlane
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={projectStore?.projectStates}
+            listKey={`id`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {sub_group_by && sub_group_by === "state_detail.group" && (
+          <SubGroupSwimlane
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={ISSUE_STATE_GROUPS}
+            listKey={`key`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {sub_group_by && sub_group_by === "priority" && (
+          <SubGroupSwimlane
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={ISSUE_PRIORITIES}
+            listKey={`key`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {sub_group_by && sub_group_by === "labels" && (
+          <SubGroupSwimlane
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={projectStore?.projectLabels}
+            listKey={`id`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {sub_group_by && sub_group_by === "assignees" && (
+          <SubGroupSwimlane
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={projectStore?.projectMembers}
+            listKey={`member.id`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+
+        {sub_group_by && sub_group_by === "created_by" && (
+          <SubGroupSwimlane
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            list={projectStore?.projectMembers}
+            listKey={`member.id`}
+            handleIssues={handleIssues}
+            display_properties={display_properties}
+            kanBanToggle={kanBanToggle}
+            handleKanBanToggle={handleKanBanToggle}
+          />
+        )}
+      </div>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/kanban/view-root.tsx b/web/components/issues/issue-layouts/kanban/view-root.tsx
new file mode 100644
index 000000000..0f5e690d0
--- /dev/null
+++ b/web/components/issues/issue-layouts/kanban/view-root.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+// react beautiful dnd
+import { DragDropContext } from "@hello-pangea/dnd";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { KanBanSwimLanes } from "./swimlanes";
+import { KanBan } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IViewKanBanLayout {}
+
+export const ViewKanBanLayout: React.FC = observer(() => {
+  const {
+    issue: issueStore,
+    issueFilter: issueFilterStore,
+    issueKanBanView: issueKanBanViewStore,
+  }: RootStore = useMobxStore();
+
+  const issues = issueStore?.getIssues;
+
+  const sub_group_by: string | null = issueFilterStore?.userDisplayFilters?.sub_group_by || null;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
+  const currentKanBanView: "swimlanes" | "default" = issueFilterStore?.userDisplayFilters?.sub_group_by
+    ? "swimlanes"
+    : "default";
+
+  const onDragEnd = (result: any) => {
+    if (!result) return;
+
+    if (
+      result.destination &&
+      result.source &&
+      result.destination.droppableId === result.source.droppableId &&
+      result.destination.index === result.source.index
+    )
+      return;
+
+    currentKanBanView === "default"
+      ? issueKanBanViewStore?.handleDragDrop(result.source, result.destination)
+      : issueKanBanViewStore?.handleSwimlaneDragDrop(result.source, result.destination);
+  };
+
+  const updateIssue = (sub_group_by: string | null, group_by: string | null, issue: any) => {
+    issueStore.updateIssueStructure(group_by, sub_group_by, issue);
+  };
+
+  return (
+    <div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
+      <DragDropContext onDragEnd={onDragEnd}>
+        {currentKanBanView === "default" ? (
+          <KanBan
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+            kanBanToggle={() => {}}
+            handleKanBanToggle={() => {}}
+          />
+        ) : (
+          <KanBanSwimLanes
+            issues={issues}
+            sub_group_by={sub_group_by}
+            group_by={group_by}
+            handleIssues={updateIssue}
+            display_properties={display_properties}
+            kanBanToggle={() => {}}
+            handleKanBanToggle={() => {}}
+          />
+        )}
+      </DragDropContext>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/block.tsx b/web/components/issues/issue-layouts/list/block.tsx
new file mode 100644
index 000000000..a54e47a01
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/block.tsx
@@ -0,0 +1,41 @@
+// components
+import { KanBanProperties } from "./properties";
+
+interface IssueBlockProps {
+  columnId: string;
+  issues: any;
+  handleIssues?: (group_by: string | null, issue: any) => void;
+  display_properties: any;
+}
+
+export const IssueBlock = ({ columnId, issues, handleIssues, display_properties }: IssueBlockProps) => (
+  <>
+    {issues && issues.length > 0 ? (
+      <>
+        {issues.map((issue: any, index: any) => (
+          <div
+            key={index}
+            className={`text-sm p-3 shadow-custom-shadow-2xs transition-all bg-custom-background-100 flex items-center flex-wrap gap-3 border-b border-custom-border-200`}
+          >
+            {display_properties && display_properties?.key && (
+              <div className="flex-shrink-0 text-xs text-custom-text-300">ONE-{issue.sequence_id}</div>
+            )}
+            <div className="line-clamp-1 text-sm font-medium text-custom-text-100">{issue.name}</div>
+            <div className="ml-auto flex-shrink-0">
+              <KanBanProperties
+                columnId={columnId}
+                issue={issue}
+                handleIssues={handleIssues}
+                display_properties={display_properties}
+              />
+            </div>
+          </div>
+        ))}
+      </>
+    ) : (
+      <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center">
+        No issues are available
+      </div>
+    )}
+  </>
+);
diff --git a/web/components/issues/issue-layouts/list/cycle-root.tsx b/web/components/issues/issue-layouts/list/cycle-root.tsx
new file mode 100644
index 000000000..827558936
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/cycle-root.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { List } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface ICycleListLayout {}
+
+export const CycleListLayout: React.FC = observer(() => {
+  const { issueFilter: issueFilterStore, cycleIssue: cycleIssueStore }: RootStore = useMobxStore();
+
+  const issues = cycleIssueStore?.getIssues;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
+  const updateIssue = (group_by: string | null, issue: any) => {
+    cycleIssueStore.updateIssueStructure(group_by, null, issue);
+  };
+
+  return (
+    <div className={`relative w-full h-full bg-custom-background-90`}>
+      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/default.tsx b/web/components/issues/issue-layouts/list/default.tsx
new file mode 100644
index 000000000..16c6a35d8
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/default.tsx
@@ -0,0 +1,132 @@
+import React from "react";
+// components
+import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
+import { IssueBlock } from "./block";
+// constants
+import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
+// mobx
+import { observer } from "mobx-react-lite";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IGroupByKanBan {
+  issues: any;
+  group_by: string | null;
+  list: any;
+  listKey: string;
+  handleIssues?: (group_by: string | null, issue: any) => void;
+  display_properties: any;
+}
+
+const GroupByKanBan: React.FC<IGroupByKanBan> = observer(
+  ({ issues, group_by, list, listKey, handleIssues, display_properties }) => (
+    <div className="relative w-full h-full">
+      {list &&
+        list.length > 0 &&
+        list.map((_list: any) => (
+          <div className={`flex-shrink-0 flex flex-col`}>
+            <div className="flex-shrink-0 w-full bg-custom-background-90 py-1 sticky top-0 z-[2] px-3">
+              <KanBanGroupByHeaderRoot
+                column_id={getValueFromObject(_list, listKey) as string}
+                group_by={group_by}
+                issues_count={issues?.[getValueFromObject(_list, listKey) as string]?.length || 0}
+              />
+            </div>
+            <div className={`w-full h-full relative transition-all`}>
+              {issues && (
+                <IssueBlock
+                  columnId={getValueFromObject(_list, listKey) as string}
+                  issues={issues[getValueFromObject(_list, listKey) as string]}
+                  handleIssues={handleIssues}
+                  display_properties={display_properties}
+                />
+              )}
+            </div>
+          </div>
+        ))}
+    </div>
+  )
+);
+
+export interface IKanBan {
+  issues: any;
+  group_by: string | null;
+  handleDragDrop?: (result: any) => void | undefined;
+  handleIssues?: (group_by: string | null, issue: any) => void;
+  display_properties: any;
+}
+
+export const List: React.FC<IKanBan> = observer(({ issues, group_by, handleIssues, display_properties }) => {
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  return (
+    <div className="relative w-full h-full">
+      {group_by && group_by === "state" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={projectStore?.projectStates}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+
+      {group_by && group_by === "state_detail.group" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={ISSUE_STATE_GROUPS}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+
+      {group_by && group_by === "priority" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={ISSUE_PRIORITIES}
+          listKey={`key`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+
+      {group_by && group_by === "labels" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={projectStore?.projectLabels}
+          listKey={`id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+
+      {group_by && group_by === "assignees" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={projectStore?.projectMembers}
+          listKey={`member.id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+
+      {group_by && group_by === "created_by" && (
+        <GroupByKanBan
+          issues={issues}
+          group_by={group_by}
+          list={projectStore?.projectMembers}
+          listKey={`member.id`}
+          handleIssues={handleIssues}
+          display_properties={display_properties}
+        />
+      )}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/assignee.tsx b/web/components/issues/issue-layouts/list/headers/assignee.tsx
new file mode 100644
index 000000000..0c46dc029
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/assignee.tsx
@@ -0,0 +1,33 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { Avatar } from "components/ui";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IAssigneesHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+export const Icon = ({ user }: any) => <Avatar user={user} height="22px" width="22px" fontSize="12px" />;
+
+export const AssigneesHeader: React.FC<IAssigneesHeader> = observer(({ column_id, issues_count }) => {
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  const assignee = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+
+  return (
+    <>
+      {assignee && (
+        <HeaderGroupByCard
+          icon={<Icon user={assignee?.member} />}
+          title={assignee?.member?.display_name || ""}
+          count={issues_count}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/created_by.tsx b/web/components/issues/issue-layouts/list/headers/created_by.tsx
new file mode 100644
index 000000000..92b074936
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/created_by.tsx
@@ -0,0 +1,31 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { Icon } from "./assignee";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface ICreatedByHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+export const CreatedByHeader: React.FC<ICreatedByHeader> = observer(({ column_id, issues_count }) => {
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  const createdBy = (column_id && projectStore?.getProjectMemberByUserId(column_id)) ?? null;
+
+  return (
+    <>
+      {createdBy && (
+        <HeaderGroupByCard
+          icon={<Icon user={createdBy?.member} />}
+          title={createdBy?.member?.display_name || ""}
+          count={issues_count}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
new file mode 100644
index 000000000..337991838
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/group-by-card.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+// lucide icons
+import { Circle } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+
+interface IHeaderGroupByCard {
+  icon?: React.ReactNode;
+  title: string;
+  count: number;
+}
+
+export const HeaderGroupByCard = observer(({ icon, title, count }: IHeaderGroupByCard) => {
+  const verticalAlignPosition = false;
+
+  return (
+    <div
+      className={`flex-shrink-0 relative flex gap-2 p-1.5 ${
+        verticalAlignPosition ? `flex-col items-center w-[44px]` : `flex-row items-center w-full`
+      }`}
+    >
+      <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center">
+        {icon ? icon : <Circle width={14} strokeWidth={2} />}
+      </div>
+
+      <div className={`flex items-center gap-1 ${verticalAlignPosition ? `flex-col` : `flex-row w-full`}`}>
+        <div className={`font-medium line-clamp-1 text-custom-text-100 ${verticalAlignPosition ? `vertical-lr` : ``}`}>
+          {title}
+        </div>
+        <div className={`text-sm font-medium text-custom-text-300 ${verticalAlignPosition ? `` : `pl-2`}`}>
+          {count || 0}
+        </div>
+      </div>
+
+      {/* <div className="flex-shrink-0 w-[20px] h-[20px] rounded-sm overflow-hidden flex justify-center items-center hover:bg-custom-background-80 cursor-pointer transition-all">
+          <Plus width={14} strokeWidth={2} />
+        </div> */}
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/group-by-root.tsx b/web/components/issues/issue-layouts/list/headers/group-by-root.tsx
new file mode 100644
index 000000000..f4a4f3820
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/group-by-root.tsx
@@ -0,0 +1,30 @@
+// components
+import { StateHeader } from "./state";
+import { StateGroupHeader } from "./state-group";
+import { AssigneesHeader } from "./assignee";
+import { PriorityHeader } from "./priority";
+import { LabelHeader } from "./label";
+import { CreatedByHeader } from "./created_by";
+// mobx
+import { observer } from "mobx-react-lite";
+
+export interface IKanBanGroupByHeaderRoot {
+  column_id: string;
+  group_by: string | null;
+  issues_count: number;
+}
+
+export const KanBanGroupByHeaderRoot: React.FC<IKanBanGroupByHeaderRoot> = observer(
+  ({ column_id, group_by, issues_count }) => (
+    <>
+      {group_by && group_by === "state" && <StateHeader column_id={column_id} issues_count={issues_count} />}
+      {group_by && group_by === "state_detail.group" && (
+        <StateGroupHeader column_id={column_id} issues_count={issues_count} />
+      )}
+      {group_by && group_by === "priority" && <PriorityHeader column_id={column_id} issues_count={issues_count} />}
+      {group_by && group_by === "labels" && <LabelHeader column_id={column_id} issues_count={issues_count} />}
+      {group_by && group_by === "assignees" && <AssigneesHeader column_id={column_id} issues_count={issues_count} />}
+      {group_by && group_by === "created_by" && <CreatedByHeader column_id={column_id} issues_count={issues_count} />}
+    </>
+  )
+);
diff --git a/web/components/issues/issue-layouts/list/headers/label.tsx b/web/components/issues/issue-layouts/list/headers/label.tsx
new file mode 100644
index 000000000..d7a6c0253
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/label.tsx
@@ -0,0 +1,24 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface ILabelHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+const Icon = ({ color }: any) => (
+  <div className="w-[12px] h-[12px] rounded-full" style={{ backgroundColor: color ? color : "#666" }} />
+);
+
+export const LabelHeader: React.FC<ILabelHeader> = observer(({ column_id, issues_count }) => {
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  const label = (column_id && projectStore?.getProjectLabelById(column_id)) ?? null;
+
+  return <>{label && <HeaderGroupByCard icon={<Icon />} title={label?.name || ""} count={issues_count} />}</>;
+});
diff --git a/web/components/issues/issue-layouts/list/headers/priority.tsx b/web/components/issues/issue-layouts/list/headers/priority.tsx
new file mode 100644
index 000000000..6bc29bb48
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/priority.tsx
@@ -0,0 +1,51 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// lucide icons
+import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+// constants
+import { issuePriorityByKey } from "constants/issue";
+
+export interface IPriorityHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+const Icon = ({ priority }: any) => (
+  <div className="w-full h-full">
+    {priority === "urgent" ? (
+      <div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <AlertCircle size={14} strokeWidth={2} />
+      </div>
+    ) : priority === "high" ? (
+      <div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalHigh size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "medium" ? (
+      <div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalMedium size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "low" ? (
+      <div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalLow size={14} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : (
+      <div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <Ban size={14} strokeWidth={2} />
+      </div>
+    )}
+  </div>
+);
+
+export const PriorityHeader: React.FC<IPriorityHeader> = observer(({ column_id, issues_count }) => {
+  const priority = column_id && issuePriorityByKey(column_id);
+
+  return (
+    <>
+      {priority && (
+        <HeaderGroupByCard icon={<Icon priority={priority?.key} />} title={priority?.key || ""} count={issues_count} />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/state-group.tsx b/web/components/issues/issue-layouts/list/headers/state-group.tsx
new file mode 100644
index 000000000..4e9169852
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/state-group.tsx
@@ -0,0 +1,34 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { StateGroupIcon } from "components/icons";
+// constants
+import { issueStateGroupByKey } from "constants/issue";
+
+export interface IStateGroupHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+export const Icon = ({ stateGroup, color }: { stateGroup: any; color?: any }) => (
+  <div className="w-[14px] h-[14px] rounded-full">
+    <StateGroupIcon stateGroup={stateGroup} color={color || null} width="14" height="14" />
+  </div>
+);
+
+export const StateGroupHeader: React.FC<IStateGroupHeader> = observer(({ column_id, issues_count }) => {
+  const stateGroup = column_id && issueStateGroupByKey(column_id);
+
+  return (
+    <>
+      {stateGroup && (
+        <HeaderGroupByCard
+          icon={<Icon stateGroup={stateGroup?.key} />}
+          title={stateGroup?.key || ""}
+          count={issues_count}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/headers/state.tsx b/web/components/issues/issue-layouts/list/headers/state.tsx
new file mode 100644
index 000000000..4210cffe6
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/headers/state.tsx
@@ -0,0 +1,31 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { HeaderGroupByCard } from "./group-by-card";
+import { Icon } from "./state-group";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IStateHeader {
+  column_id: string;
+  issues_count: number;
+}
+
+export const StateHeader: React.FC<IStateHeader> = observer(({ column_id, issues_count }) => {
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  const state = (column_id && projectStore?.getProjectStateById(column_id)) ?? null;
+
+  return (
+    <>
+      {state && (
+        <HeaderGroupByCard
+          icon={<Icon stateGroup={state?.group} color={state?.color} />}
+          title={state?.name || ""}
+          count={issues_count}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/index.ts b/web/components/issues/issue-layouts/list/index.ts
new file mode 100644
index 000000000..a46683af6
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/index.ts
@@ -0,0 +1,3 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./root";
diff --git a/web/components/issues/issue-layouts/list/module-root.tsx b/web/components/issues/issue-layouts/list/module-root.tsx
new file mode 100644
index 000000000..66f8771f7
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/module-root.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { List } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IModuleListLayout {}
+
+export const ModuleListLayout: React.FC = observer(() => {
+  const { issueFilter: issueFilterStore, moduleIssue: moduleIssueStore }: RootStore = useMobxStore();
+
+  const issues = moduleIssueStore?.getIssues;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
+  const updateIssue = (group_by: string | null, issue: any) => {
+    moduleIssueStore.updateIssueStructure(group_by, null, issue);
+  };
+
+  return (
+    <div className={`relative w-full h-full bg-custom-background-90`}>
+      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/properties.tsx b/web/components/issues/issue-layouts/list/properties.tsx
new file mode 100644
index 000000000..6de888de1
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/properties.tsx
@@ -0,0 +1,166 @@
+// mobx
+import { observer } from "mobx-react-lite";
+// lucide icons
+import { Layers, Link, Paperclip } from "lucide-react";
+// components
+import { IssuePropertyState } from "../properties/state";
+import { IssuePropertyPriority } from "../properties/priority";
+import { IssuePropertyLabels } from "../properties/labels";
+import { IssuePropertyAssignee } from "../properties/assignee";
+import { IssuePropertyEstimates } from "../properties/estimates";
+import { IssuePropertyStartDate } from "../properties/date";
+import { Tooltip } from "@plane/ui";
+
+export interface IKanBanProperties {
+  columnId: string;
+  issue: any;
+  handleIssues?: (group_by: string | null, issue: any) => void;
+  display_properties: any;
+}
+
+export const KanBanProperties: React.FC<IKanBanProperties> = observer(
+  ({ columnId: group_id, issue, handleIssues, display_properties }) => {
+    const handleState = (id: string) => {
+      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: id });
+    };
+
+    const handlePriority = (id: string) => {
+      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: id });
+    };
+
+    const handleLabel = (ids: string[]) => {
+      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids });
+    };
+
+    const handleAssignee = (ids: string[]) => {
+      if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
+    };
+
+    const handleStartDate = (date: string) => {
+      if (handleIssues)
+        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
+    };
+
+    const handleTargetDate = (date: string) => {
+      if (handleIssues)
+        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
+    };
+
+    const handleEstimate = (id: string) => {
+      if (handleIssues)
+        handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: id });
+    };
+
+    return (
+      <div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
+        {/* basic properties */}
+        {/* state */}
+        {display_properties && display_properties?.state && (
+          <IssuePropertyState
+            value={issue?.state || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handleState(id)}
+            disabled={false}
+          />
+        )}
+
+        {/* priority */}
+        {display_properties && display_properties?.priority && (
+          <IssuePropertyPriority
+            value={issue?.priority || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handlePriority(id)}
+            disabled={false}
+          />
+        )}
+
+        {/* label */}
+        {display_properties && display_properties?.labels && (
+          <IssuePropertyLabels
+            value={issue?.labels || null}
+            dropdownArrow={false}
+            onChange={(ids: string[]) => handleLabel(ids)}
+            disabled={false}
+          />
+        )}
+
+        {/* assignee */}
+        {display_properties && display_properties?.assignee && (
+          <IssuePropertyAssignee
+            value={issue?.assignees || null}
+            dropdownArrow={false}
+            onChange={(ids: string[]) => handleAssignee(ids)}
+            disabled={false}
+          />
+        )}
+
+        {/* start date */}
+        {display_properties && display_properties?.start_date && (
+          <IssuePropertyStartDate
+            value={issue?.start_date || null}
+            onChange={(date: string) => handleStartDate(date)}
+            disabled={false}
+          />
+        )}
+
+        {/* target/due date */}
+        {display_properties && display_properties?.due_date && (
+          <IssuePropertyStartDate
+            value={issue?.target_date || null}
+            onChange={(date: string) => handleTargetDate(date)}
+            disabled={false}
+          />
+        )}
+
+        {/* estimates */}
+        {display_properties && display_properties?.estimate && (
+          <IssuePropertyEstimates
+            value={issue?.estimate_point?.toString() || null}
+            dropdownArrow={false}
+            onChange={(id: string) => handleEstimate(id)}
+            disabled={false}
+            workspaceSlug={issue?.workspace_detail?.slug || null}
+            projectId={issue?.project_detail?.id || null}
+          />
+        )}
+
+        {/* extra render properties */}
+        {/* sub-issues */}
+        {display_properties && display_properties?.sub_issue_count && (
+          <Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+                <Layers width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
+            </div>
+          </Tooltip>
+        )}
+
+        {/* attachments */}
+        {display_properties && display_properties?.attachment_count && (
+          <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                <Paperclip width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
+            </div>
+          </Tooltip>
+        )}
+
+        {/* link */}
+        {display_properties && display_properties?.link && (
+          <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
+            <div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
+              <div className="flex-shrink-0  w-[16px] h-[16px] flex justify-center items-center">
+                <Link width={10} strokeWidth={2} />
+              </div>
+              <div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
+            </div>
+          </Tooltip>
+        )}
+      </div>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/list/root.tsx b/web/components/issues/issue-layouts/list/root.tsx
new file mode 100644
index 000000000..d3b7d0d3a
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/root.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { List } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IListLayout {}
+
+export const ListLayout: React.FC = observer(() => {
+  const { issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
+
+  const issues = issueStore?.getIssues;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
+  const updateIssue = (group_by: string | null, issue: any) => {
+    issueStore.updateIssueStructure(group_by, null, issue);
+  };
+
+  return (
+    <div className={`relative w-full h-full bg-custom-background-90`}>
+      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/list/view-root.tsx b/web/components/issues/issue-layouts/list/view-root.tsx
new file mode 100644
index 000000000..0e3db56c7
--- /dev/null
+++ b/web/components/issues/issue-layouts/list/view-root.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { List } from "./default";
+// store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+export interface IViewListLayout {}
+
+export const ViewListLayout: React.FC = observer(() => {
+  const { issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
+
+  const issues = issueStore?.getIssues;
+
+  const group_by: string | null = issueFilterStore?.userDisplayFilters?.group_by || null;
+
+  const display_properties = issueFilterStore?.userDisplayProperties || null;
+
+  const updateIssue = (group_by: string | null, issue: any) => {
+    issueStore.updateIssueStructure(group_by, null, issue);
+  };
+
+  return (
+    <div className={`relative w-full h-full bg-custom-background-90`}>
+      <List issues={issues} group_by={group_by} handleIssues={updateIssue} display_properties={display_properties} />
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx
new file mode 100644
index 000000000..6cd1f78d2
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/assignee.tsx
@@ -0,0 +1,266 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "@plane/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+  avatar: string;
+}
+
+export interface IIssuePropertyAssignee {
+  value?: any;
+  onChange?: (id: any, data: any) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (projectStore?.projectMembers &&
+        projectStore?.projectMembers?.length > 0 &&
+        projectStore?.projectMembers.map((_member: any) => ({
+          id: _member?.member?.id,
+          title: _member?.member?.display_name,
+          avatar: _member?.member?.avatar && _member?.member?.avatar !== "" ? _member?.member?.avatar : null,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption[] =
+      (value && value?.length > 0 && options.filter((_member: IFiltersOption) => value.includes(_member.id))) || [];
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((_member: IFiltersOption) =>
+            _member.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    const assigneeRenderLength = 5;
+
+    return (
+      <Combobox
+        multiple={true}
+        as="div"
+        className={`${className}`}
+        value={selectedOption.map((_member: IFiltersOption) => _member.id) as string[]}
+        onChange={(data: string[]) => {
+          if (onChange && selectedOption) onChange(data, selectedOption);
+        }}
+        disabled={disabled}
+      >
+        {({ open }: { open: boolean }) => {
+          if (open) {
+            if (!isOpen) setIsOpen(true);
+          } else if (isOpen) setIsOpen(false);
+
+          return (
+            <>
+              <Combobox.Button
+                ref={dropdownBtn}
+                type="button"
+                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                } ${buttonClassName}`}
+              >
+                {selectedOption && selectedOption?.length > 0 ? (
+                  <>
+                    {selectedOption?.length > 1 ? (
+                      <Tooltip
+                        tooltipHeading={`Assignees`}
+                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                      >
+                        <div className="flex-shrink-0 flex justify-center items-center gap-1 pr-[8px]">
+                          {selectedOption.slice(0, assigneeRenderLength).map((_assignee) => (
+                            <div
+                              key={_assignee?.id}
+                              className="flex-shrink-0 w-[16px] h-[16px] rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300"
+                            >
+                              {_assignee && _assignee.avatar ? (
+                                <img
+                                  src={_assignee.avatar}
+                                  className="absolute top-0 left-0 h-full w-full object-cover"
+                                  alt={_assignee.title}
+                                />
+                              ) : (
+                                _assignee.title[0]
+                              )}
+                            </div>
+                          ))}
+                          {selectedOption.length > assigneeRenderLength && (
+                            <div className="flex-shrink-0 h-[16px] px-0.5 rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300">
+                              +{selectedOption?.length - assigneeRenderLength}
+                            </div>
+                          )}
+                        </div>
+                      </Tooltip>
+                    ) : (
+                      <Tooltip
+                        tooltipHeading={`Assignees`}
+                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                      >
+                        <div className="flex-shrink-0 flex justify-center items-center gap-1 text-xs">
+                          <div className="flex-shrink-0 w-[14px] h-[14px] rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden text-xs">
+                            {selectedOption[0] && selectedOption[0].avatar ? (
+                              <img
+                                src={selectedOption[0].avatar}
+                                className="absolute top-0 left-0 h-full w-full object-cover"
+                                alt={selectedOption[0].title}
+                              />
+                            ) : (
+                              <div className="w-full h-full bg-gray-700 flex justify-center items-center">
+                                {selectedOption[0].title[0]}
+                              </div>
+                            )}
+                          </div>
+                          <div className="line-clamp-1">{selectedOption[0].title}</div>
+                        </div>
+                      </Tooltip>
+                    )}
+                  </>
+                ) : (
+                  <div className="text-xs">Select option</div>
+                )}
+
+                {dropdownArrow && !disabled && (
+                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                    <ChevronDown width={14} strokeWidth={2} />
+                  </div>
+                )}
+              </Combobox.Button>
+
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  {options && options.length > 0 ? (
+                    <>
+                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                          <Search width={12} strokeWidth={2} />
+                        </div>
+
+                        <div>
+                          <Combobox.Input
+                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder="Search"
+                            displayValue={(assigned: any) => assigned?.name}
+                          />
+                        </div>
+
+                        {search && search.length > 0 && (
+                          <div
+                            onClick={() => setSearch("")}
+                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                          >
+                            <X width={12} strokeWidth={2} />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                        {filteredOptions ? (
+                          filteredOptions.length > 0 ? (
+                            filteredOptions.map((option) => (
+                              <Combobox.Option
+                                key={option.id}
+                                value={option.id}
+                                className={({ active }) =>
+                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                    active || (value && value.length > 0 && value.includes(option?.id))
+                                      ? "bg-custom-background-80"
+                                      : ""
+                                  } ${
+                                    value && value.length > 0 && value.includes(option?.id)
+                                      ? "text-custom-text-100"
+                                      : "text-custom-text-200"
+                                  }`
+                                }
+                              >
+                                <div className="flex items-center gap-1 w-full px-1">
+                                  <div className="flex-shrink-0 w-[18px] h-[18px] rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden">
+                                    {option && option.avatar ? (
+                                      <img
+                                        src={option.avatar}
+                                        className="absolute top-0 left-0 h-full w-full object-cover"
+                                        alt={option.title}
+                                      />
+                                    ) : (
+                                      <div className="w-full h-full bg-gray-700 flex justify-center items-center">
+                                        {option.title[0]}
+                                      </div>
+                                    )}
+                                  </div>
+                                  <div className="line-clamp-1">{option.title}</div>
+                                  {value && value.length > 0 && value.includes(option?.id) && (
+                                    <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                      <Check width={13} strokeWidth={2} />
+                                    </div>
+                                  )}
+                                </div>
+                              </Combobox.Option>
+                            ))
+                          ) : (
+                            <span className="flex items-center gap-2 p-1">
+                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                            </span>
+                          )
+                        ) : (
+                          <p className="text-center text-custom-text-200">Loading...</p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-center text-custom-text-200">No options available.</p>
+                  )}
+                </Combobox.Options>
+              </div>
+            </>
+          );
+        }}
+      </Combobox>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/date.tsx b/web/components/issues/issue-layouts/properties/date.tsx
new file mode 100644
index 000000000..2056e67ce
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/date.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+// headless ui
+import { Popover } from "@headlessui/react";
+// lucide icons
+import { Calendar, X } from "lucide-react";
+// react date picker
+import DatePicker from "react-datepicker";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "@plane/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// helpers
+import { renderDateFormat } from "helpers/date-time.helper";
+
+export interface IIssuePropertyStartDate {
+  value?: any;
+  onChange?: (date: any) => void;
+  disabled?: boolean;
+}
+
+export const IssuePropertyStartDate: React.FC<IIssuePropertyStartDate> = observer(({ value, onChange, disabled }) => {
+  const dropdownBtn = React.useRef<any>(null);
+  const dropdownOptions = React.useRef<any>(null);
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+  return (
+    <Popover as="div" className="relative">
+      {({ open }) => {
+        if (open) {
+          if (!isOpen) setIsOpen(true);
+        } else if (isOpen) setIsOpen(false);
+
+        return (
+          <>
+            <Popover.Button
+              ref={dropdownBtn}
+              className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              }`}
+            >
+              <Tooltip tooltipHeading={`Start Date`} tooltipContent={value}>
+                <div className="flex-shrink-0 overflow-hidden rounded-sm flex justify-center items-center">
+                  <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                    <Calendar width={10} strokeWidth={2} />
+                  </div>
+                  {value ? (
+                    <>
+                      <div className="px-1 text-xs">{value}</div>
+                      <div
+                        className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center cursor-pointer"
+                        onClick={() => {
+                          if (onChange) onChange(null);
+                        }}
+                      >
+                        <X width={10} strokeWidth={2} />
+                      </div>
+                    </>
+                  ) : (
+                    <div className="text-xs">Select date</div>
+                  )}
+                </div>
+              </Tooltip>
+            </Popover.Button>
+
+            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+              <Popover.Panel
+                ref={dropdownOptions}
+                className={`absolute z-10 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1`}
+              >
+                {({ close }) => (
+                  <DatePicker
+                    selected={value ? new Date(value) : new Date()}
+                    onChange={(val: any) => {
+                      if (onChange && val) {
+                        onChange(renderDateFormat(val));
+                        close();
+                      }
+                    }}
+                    dateFormat="dd-MM-yyyy"
+                    calendarClassName="h-full"
+                    inline
+                  />
+                )}
+              </Popover.Panel>
+            </div>
+          </>
+        );
+      }}
+    </Popover>
+  );
+});
diff --git a/web/components/issues/issue-layouts/properties/dropdown-template.tsx b/web/components/issues/issue-layouts/properties/dropdown-template.tsx
new file mode 100644
index 000000000..25cbaa942
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/dropdown-template.tsx
@@ -0,0 +1,175 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check } from "lucide-react";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+}
+
+export interface IIssuePropertyState {
+  options: IFiltersOption[];
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+
+  children?: any;
+}
+
+export const IssuePropertyState: React.FC<IIssuePropertyState> = ({
+  options,
+  value,
+  onChange,
+  disabled,
+
+  className,
+  buttonClassName,
+  optionsClassName,
+  dropdownArrow = true,
+
+  children,
+}) => {
+  const dropdownBtn = React.useRef<any>(null);
+  const dropdownOptions = React.useRef<any>(null);
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const [search, setSearch] = React.useState<string>("");
+
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+  const selectedOption: IFiltersOption | null | undefined =
+    (value && options.find((person: IFiltersOption) => person.id === value)) || null;
+
+  const filteredOptions: IFiltersOption[] =
+    search === ""
+      ? options && options.length > 0
+        ? options
+        : []
+      : options && options.length > 0
+      ? options.filter((person: IFiltersOption) =>
+          person.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+        )
+      : [];
+
+  return (
+    <Combobox
+      as="div"
+      className={`${className}`}
+      value={selectedOption && selectedOption.id}
+      onChange={(data: string) => {
+        if (onChange && selectedOption) onChange(data, selectedOption);
+      }}
+      disabled={disabled}
+    >
+      {({ open }: { open: boolean }) => {
+        if (open) {
+          if (!isOpen) setIsOpen(true);
+        } else if (isOpen) setIsOpen(false);
+
+        return (
+          <>
+            <Combobox.Button
+              ref={dropdownBtn}
+              type="button"
+              className={`flex items-center justify-between gap-1 w-full px-1 py-1 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+              } ${buttonClassName}`}
+            >
+              {children ? (
+                children
+              ) : (
+                <div className="text-xs">{(selectedOption && selectedOption?.title) || "Select option"}</div>
+              )}
+
+              {dropdownArrow && !disabled && (
+                <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                  <ChevronDown width={14} strokeWidth={2} />
+                </div>
+              )}
+            </Combobox.Button>
+
+            {options && options.length > 0 ? (
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none min-w-48 max-w-60 whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                    <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                      <Search width={12} strokeWidth={2} />
+                    </div>
+
+                    <div>
+                      <Combobox.Input
+                        className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                        value={search}
+                        onChange={(e) => setSearch(e.target.value)}
+                        placeholder="Search"
+                        displayValue={(assigned: any) => assigned?.name}
+                      />
+                    </div>
+
+                    {search && search.length > 0 && (
+                      <div
+                        onClick={() => setSearch("")}
+                        className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                      >
+                        <X width={12} strokeWidth={2} />
+                      </div>
+                    )}
+                  </div>
+
+                  <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                    {filteredOptions ? (
+                      filteredOptions.length > 0 ? (
+                        filteredOptions.map((option) => (
+                          <Combobox.Option
+                            key={option.id}
+                            value={option.id}
+                            className={({ active, selected }) =>
+                              `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                active || selected ? "bg-custom-background-80" : ""
+                              } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                            }
+                          >
+                            {({ selected }) => (
+                              <div className="flex justify-between items-center gap-1 w-full px-1">
+                                <div className="line-clamp-1">{option.title}</div>
+                                {selected && (
+                                  <div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
+                                    <Check width={13} strokeWidth={2} />
+                                  </div>
+                                )}
+                              </div>
+                            )}
+                          </Combobox.Option>
+                        ))
+                      ) : (
+                        <span className="flex items-center gap-2 p-1">
+                          <p className="text-left text-custom-text-200 ">No matching results</p>
+                        </span>
+                      )
+                    ) : (
+                      <p className="text-center text-custom-text-200">Loading...</p>
+                    )}
+                  </div>
+                </Combobox.Options>
+              </div>
+            ) : (
+              <p className="text-center text-custom-text-200">No options available.</p>
+            )}
+          </>
+        );
+      }}
+    </Combobox>
+  );
+};
diff --git a/web/components/issues/issue-layouts/properties/estimates.tsx b/web/components/issues/issue-layouts/properties/estimates.tsx
new file mode 100644
index 000000000..fc9ad5bc9
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/estimates.tsx
@@ -0,0 +1,215 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check, Triangle } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "@plane/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+  key: string;
+}
+
+export interface IIssuePropertyEstimates {
+  value?: any;
+  onChange?: (id: any) => void;
+  disabled?: boolean;
+
+  workspaceSlug?: string;
+  projectId?: string;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    workspaceSlug,
+    projectId,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const projectDetail =
+      (workspaceSlug && projectId && projectStore?.getProjectById(workspaceSlug, projectId)) || null;
+    const projectEstimateId = (projectDetail && projectDetail?.estimate) || null;
+    const estimates = (projectEstimateId && projectStore?.getProjectEstimateById(projectEstimateId)) || null;
+
+    const options: IFiltersOption[] | [] =
+      (estimates &&
+        estimates.points &&
+        estimates.points.length > 0 &&
+        estimates.points.map((_estimate) => ({
+          id: _estimate?.id,
+          title: _estimate?.value,
+          key: _estimate?.key.toString(),
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption | null | undefined =
+      (value && options.find((_estimate: IFiltersOption) => _estimate.key === value)) || null;
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((_estimate: IFiltersOption) =>
+            _estimate.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        as="div"
+        className={`${className}`}
+        value={selectedOption && selectedOption.key}
+        onChange={(data: string) => {
+          if (onChange) onChange(data);
+        }}
+        disabled={disabled}
+      >
+        {({ open }: { open: boolean }) => {
+          if (open) {
+            if (!isOpen) setIsOpen(true);
+          } else if (isOpen) setIsOpen(false);
+
+          return (
+            <>
+              <Combobox.Button
+                ref={dropdownBtn}
+                type="button"
+                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                } ${buttonClassName}`}
+              >
+                {selectedOption ? (
+                  <Tooltip tooltipHeading={`Estimates`} tooltipContent={selectedOption?.title}>
+                    <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                      <div className="flex-shrink-0 w-[12px] h-[12px] flex justify-center items-center">
+                        <Triangle width={14} strokeWidth={2} />
+                      </div>
+                      <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
+                    </div>
+                  </Tooltip>
+                ) : (
+                  <div className="text-xs">Select option</div>
+                )}
+
+                {dropdownArrow && !disabled && (
+                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                    <ChevronDown width={14} strokeWidth={2} />
+                  </div>
+                )}
+              </Combobox.Button>
+
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  {options && options.length > 0 ? (
+                    <>
+                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                          <Search width={12} strokeWidth={2} />
+                        </div>
+
+                        <div>
+                          <Combobox.Input
+                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder="Search"
+                            displayValue={(assigned: any) => assigned?.name}
+                          />
+                        </div>
+
+                        {search && search.length > 0 && (
+                          <div
+                            onClick={() => setSearch("")}
+                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                          >
+                            <X width={12} strokeWidth={2} />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                        {filteredOptions ? (
+                          filteredOptions.length > 0 ? (
+                            filteredOptions.map((option) => (
+                              <Combobox.Option
+                                key={option.key}
+                                value={option.key}
+                                className={({ active, selected }) =>
+                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                    active || selected ? "bg-custom-background-80" : ""
+                                  } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                                }
+                              >
+                                {({ selected }) => (
+                                  <div className="flex items-center gap-1 w-full px-1">
+                                    <div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
+                                      <Triangle width={14} strokeWidth={2} />
+                                    </div>
+                                    <div className="line-clamp-1">{option.title}</div>
+                                    {selected && (
+                                      <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                        <Check width={13} strokeWidth={2} />
+                                      </div>
+                                    )}
+                                  </div>
+                                )}
+                              </Combobox.Option>
+                            ))
+                          ) : (
+                            <span className="flex items-center gap-2 p-1">
+                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                            </span>
+                          )
+                        ) : (
+                          <p className="text-center text-custom-text-200">Loading...</p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-center text-custom-text-200">No options available.</p>
+                  )}
+                </Combobox.Options>
+              </div>
+            </>
+          );
+        }}
+      </Combobox>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/labels.tsx b/web/components/issues/issue-layouts/properties/labels.tsx
new file mode 100644
index 000000000..189832615
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@@ -0,0 +1,234 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "@plane/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+  color: string | null;
+}
+
+export interface IIssuePropertyLabels {
+  value?: any;
+  onChange?: (id: any, data: any) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (projectStore?.projectLabels &&
+        projectStore?.projectLabels?.length > 0 &&
+        projectStore?.projectLabels.map((_label: any) => ({
+          id: _label?.id,
+          title: _label?.name,
+          color: _label?.color || null,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption[] =
+      (value && value?.length > 0 && options.filter((_label: IFiltersOption) => value.includes(_label.id))) || [];
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((_label: IFiltersOption) =>
+            _label.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        multiple={true}
+        as="div"
+        className={`${className}`}
+        value={selectedOption.map((_label: IFiltersOption) => _label.id) as string[]}
+        onChange={(data: string[]) => {
+          if (onChange && selectedOption) onChange(data, selectedOption);
+        }}
+        disabled={disabled}
+      >
+        {({ open }: { open: boolean }) => {
+          if (open) {
+            if (!isOpen) setIsOpen(true);
+          } else if (isOpen) setIsOpen(false);
+
+          return (
+            <>
+              <Combobox.Button
+                ref={dropdownBtn}
+                type="button"
+                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                } ${buttonClassName}`}
+              >
+                {selectedOption && selectedOption?.length > 0 ? (
+                  <>
+                    {selectedOption?.length === 1 ? (
+                      <Tooltip
+                        tooltipHeading={`Labels`}
+                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                      >
+                        <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                          <div
+                            className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
+                            style={{
+                              backgroundColor: selectedOption[0]?.color || "#444",
+                            }}
+                          />
+                          <div className="pl-0.5 pr-1 text-xs">{selectedOption[0]?.title}</div>
+                        </div>
+                      </Tooltip>
+                    ) : (
+                      <Tooltip
+                        tooltipHeading={`Labels`}
+                        tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
+                      >
+                        <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                          <div
+                            className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
+                            style={{ backgroundColor: "#444" }}
+                          />
+                          <div className="pl-0.5 pr-1 text-xs">{selectedOption?.length} Labels</div>
+                        </div>
+                      </Tooltip>
+                    )}
+                  </>
+                ) : (
+                  <div className="text-xs">Select option</div>
+                )}
+
+                {dropdownArrow && !disabled && (
+                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                    <ChevronDown width={14} strokeWidth={2} />
+                  </div>
+                )}
+              </Combobox.Button>
+
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  {options && options.length > 0 ? (
+                    <>
+                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                          <Search width={12} strokeWidth={2} />
+                        </div>
+
+                        <div>
+                          <Combobox.Input
+                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder="Search"
+                            displayValue={(assigned: any) => assigned?.name}
+                          />
+                        </div>
+
+                        {search && search.length > 0 && (
+                          <div
+                            onClick={() => setSearch("")}
+                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                          >
+                            <X width={12} strokeWidth={2} />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                        {filteredOptions ? (
+                          filteredOptions.length > 0 ? (
+                            filteredOptions.map((option) => (
+                              <Combobox.Option
+                                key={option.id}
+                                value={option.id}
+                                className={({ active }) =>
+                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                    active || (value && value.length > 0 && value.includes(option?.id))
+                                      ? "bg-custom-background-80"
+                                      : ""
+                                  } ${
+                                    value && value.length > 0 && value.includes(option?.id)
+                                      ? "text-custom-text-100"
+                                      : "text-custom-text-200"
+                                  }`
+                                }
+                              >
+                                <div className="flex items-center gap-1 w-full px-1">
+                                  <div
+                                    className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
+                                    style={{
+                                      backgroundColor: option.color || "#444",
+                                    }}
+                                  />
+                                  <div className="line-clamp-1">{option.title}</div>
+                                  {value && value.length > 0 && value.includes(option?.id) && (
+                                    <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                      <Check width={13} strokeWidth={2} />
+                                    </div>
+                                  )}
+                                </div>
+                              </Combobox.Option>
+                            ))
+                          ) : (
+                            <span className="flex items-center gap-2 p-1">
+                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                            </span>
+                          )
+                        ) : (
+                          <p className="text-center text-custom-text-200">Loading...</p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-center text-custom-text-200">No options available.</p>
+                  )}
+                </Combobox.Options>
+              </div>
+            </>
+          );
+        }}
+      </Combobox>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/priority.tsx b/web/components/issues/issue-layouts/properties/priority.tsx
new file mode 100644
index 000000000..44ed22237
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/priority.tsx
@@ -0,0 +1,224 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check, AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "@plane/ui";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// constants
+import { ISSUE_PRIORITIES } from "constants/issue";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+}
+
+export interface IIssuePropertyPriority {
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+const Icon = ({ priority }: any) => (
+  <div className="w-full h-full">
+    {priority === "urgent" ? (
+      <div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <AlertCircle size={12} strokeWidth={2} />
+      </div>
+    ) : priority === "high" ? (
+      <div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalHigh size={12} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "medium" ? (
+      <div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalMedium size={12} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : priority === "low" ? (
+      <div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <SignalLow size={12} strokeWidth={2} className="pl-[3px]" />
+      </div>
+    ) : (
+      <div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
+        <Ban size={12} strokeWidth={2} />
+      </div>
+    )}
+  </div>
+);
+
+export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (ISSUE_PRIORITIES &&
+        ISSUE_PRIORITIES?.length > 0 &&
+        ISSUE_PRIORITIES.map((_priority: any) => ({
+          id: _priority?.key,
+          title: _priority?.title,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption | null | undefined =
+      (value && options.find((_priority: IFiltersOption) => _priority.id === value)) || null;
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((_priority: IFiltersOption) =>
+            _priority.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        as="div"
+        className={`${className}`}
+        value={selectedOption && selectedOption.id}
+        onChange={(data: string) => {
+          if (onChange && selectedOption) onChange(data, selectedOption);
+        }}
+        disabled={disabled}
+      >
+        {({ open }: { open: boolean }) => {
+          if (open) {
+            if (!isOpen) setIsOpen(true);
+          } else if (isOpen) setIsOpen(false);
+
+          return (
+            <>
+              <Combobox.Button
+                ref={dropdownBtn}
+                type="button"
+                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                } ${buttonClassName}`}
+              >
+                {selectedOption ? (
+                  <Tooltip tooltipHeading={`Priority`} tooltipContent={selectedOption?.title}>
+                    <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                      <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                        <Icon priority={selectedOption?.id} />
+                      </div>
+                      <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
+                    </div>
+                  </Tooltip>
+                ) : (
+                  <div className="text-xs">Select option</div>
+                )}
+
+                {dropdownArrow && !disabled && (
+                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                    <ChevronDown width={14} strokeWidth={2} />
+                  </div>
+                )}
+              </Combobox.Button>
+
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  {options && options.length > 0 ? (
+                    <>
+                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                          <Search width={12} strokeWidth={2} />
+                        </div>
+
+                        <div>
+                          <Combobox.Input
+                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder="Search"
+                            displayValue={(assigned: any) => assigned?.name}
+                          />
+                        </div>
+
+                        {search && search.length > 0 && (
+                          <div
+                            onClick={() => setSearch("")}
+                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                          >
+                            <X width={12} strokeWidth={2} />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                        {filteredOptions ? (
+                          filteredOptions.length > 0 ? (
+                            filteredOptions.map((option) => (
+                              <Combobox.Option
+                                key={option.id}
+                                value={option.id}
+                                className={({ active, selected }) =>
+                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                    active || selected ? "bg-custom-background-80" : ""
+                                  } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                                }
+                              >
+                                {({ selected }) => (
+                                  <div className="flex items-center gap-1 w-full px-1">
+                                    <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
+                                      <Icon priority={option?.id} />
+                                    </div>
+                                    <div className="line-clamp-1">{option.title}</div>
+                                    {selected && (
+                                      <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                        <Check width={13} strokeWidth={2} />
+                                      </div>
+                                    )}
+                                  </div>
+                                )}
+                              </Combobox.Option>
+                            ))
+                          ) : (
+                            <span className="flex items-center gap-2 p-1">
+                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                            </span>
+                          )
+                        ) : (
+                          <p className="text-center text-custom-text-200">Loading...</p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-center text-custom-text-200">No options available.</p>
+                  )}
+                </Combobox.Options>
+              </div>
+            </>
+          );
+        }}
+      </Combobox>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/properties/state.tsx b/web/components/issues/issue-layouts/properties/state.tsx
new file mode 100644
index 000000000..8674a45ac
--- /dev/null
+++ b/web/components/issues/issue-layouts/properties/state.tsx
@@ -0,0 +1,218 @@
+import React from "react";
+// headless ui
+import { Combobox } from "@headlessui/react";
+// lucide icons
+import { ChevronDown, Search, X, Check } from "lucide-react";
+// mobx
+import { observer } from "mobx-react-lite";
+// components
+import { Tooltip } from "@plane/ui";
+import { StateGroupIcon } from "components/icons";
+// hooks
+import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// types
+import { IState } from "types";
+
+interface IFiltersOption {
+  id: string;
+  title: string;
+  group: string;
+  color: string | null;
+}
+
+export interface IIssuePropertyState {
+  value?: any;
+  onChange?: (id: any, data: IFiltersOption) => void;
+  disabled?: boolean;
+
+  className?: string;
+  buttonClassName?: string;
+  optionsClassName?: string;
+  dropdownArrow?: boolean;
+}
+
+export const IssuePropertyState: React.FC<IIssuePropertyState> = observer(
+  ({
+    value,
+    onChange,
+    disabled,
+
+    className,
+    buttonClassName,
+    optionsClassName,
+    dropdownArrow = true,
+  }) => {
+    const { project: projectStore }: RootStore = useMobxStore();
+
+    const dropdownBtn = React.useRef<any>(null);
+    const dropdownOptions = React.useRef<any>(null);
+
+    const [isOpen, setIsOpen] = React.useState<boolean>(false);
+    const [search, setSearch] = React.useState<string>("");
+
+    const options: IFiltersOption[] | [] =
+      (projectStore?.projectStates &&
+        projectStore?.projectStates?.length > 0 &&
+        projectStore?.projectStates.map((_state: IState) => ({
+          id: _state?.id,
+          title: _state?.name,
+          group: _state?.group,
+          color: _state?.color || null,
+        }))) ||
+      [];
+
+    useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
+
+    const selectedOption: IFiltersOption | null | undefined =
+      (value && options.find((_state: IFiltersOption) => _state.id === value)) || null;
+
+    const filteredOptions: IFiltersOption[] =
+      search === ""
+        ? options && options.length > 0
+          ? options
+          : []
+        : options && options.length > 0
+        ? options.filter((_state: IFiltersOption) =>
+            _state.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
+          )
+        : [];
+
+    return (
+      <Combobox
+        as="div"
+        className={`${className}`}
+        value={selectedOption && selectedOption.id}
+        onChange={(data: string) => {
+          if (onChange && selectedOption) onChange(data, selectedOption);
+        }}
+        disabled={disabled}
+      >
+        {({ open }: { open: boolean }) => {
+          if (open) {
+            if (!isOpen) setIsOpen(true);
+          } else if (isOpen) setIsOpen(false);
+
+          return (
+            <>
+              <Combobox.Button
+                ref={dropdownBtn}
+                type="button"
+                className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
+                } ${buttonClassName}`}
+              >
+                {selectedOption ? (
+                  <Tooltip tooltipHeading={`State`} tooltipContent={selectedOption?.title}>
+                    <div className="flex-shrink-0 flex justify-center items-center gap-1">
+                      <div className="flex-shrink-0 w-[12px] h-[12px] flex justify-center items-center">
+                        <StateGroupIcon
+                          stateGroup={selectedOption?.group as any}
+                          color={(selectedOption?.color || null) as any}
+                          width="12"
+                          height="12"
+                        />
+                      </div>
+                      <div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
+                    </div>
+                  </Tooltip>
+                ) : (
+                  <div className="text-xs">Select option</div>
+                )}
+
+                {dropdownArrow && !disabled && (
+                  <div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
+                    <ChevronDown width={14} strokeWidth={2} />
+                  </div>
+                )}
+              </Combobox.Button>
+
+              <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+                <Combobox.Options
+                  ref={dropdownOptions}
+                  className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
+                >
+                  {options && options.length > 0 ? (
+                    <>
+                      <div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
+                        <div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
+                          <Search width={12} strokeWidth={2} />
+                        </div>
+
+                        <div>
+                          <Combobox.Input
+                            className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+                            value={search}
+                            onChange={(e) => setSearch(e.target.value)}
+                            placeholder="Search"
+                            displayValue={(assigned: any) => assigned?.name}
+                          />
+                        </div>
+
+                        {search && search.length > 0 && (
+                          <div
+                            onClick={() => setSearch("")}
+                            className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
+                          >
+                            <X width={12} strokeWidth={2} />
+                          </div>
+                        )}
+                      </div>
+
+                      <div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
+                        {filteredOptions ? (
+                          filteredOptions.length > 0 ? (
+                            filteredOptions.map((option) => (
+                              <Combobox.Option
+                                key={option.id}
+                                value={option.id}
+                                className={({ active, selected }) =>
+                                  `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
+                                    active || selected ? "bg-custom-background-80" : ""
+                                  } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
+                                }
+                              >
+                                {({ selected }) => (
+                                  <div className="flex items-center gap-1 w-full px-1">
+                                    <div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
+                                      <StateGroupIcon
+                                        stateGroup={option?.group as any}
+                                        color={(option?.color || null) as any}
+                                        width="13"
+                                        height="13"
+                                      />
+                                    </div>
+                                    <div className="line-clamp-1">{option.title}</div>
+                                    {selected && (
+                                      <div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
+                                        <Check width={13} strokeWidth={2} />
+                                      </div>
+                                    )}
+                                  </div>
+                                )}
+                              </Combobox.Option>
+                            ))
+                          ) : (
+                            <span className="flex items-center gap-2 p-1">
+                              <p className="text-left text-custom-text-200 ">No matching results</p>
+                            </span>
+                          )
+                        ) : (
+                          <p className="text-center text-custom-text-200">Loading...</p>
+                        )}
+                      </div>
+                    </>
+                  ) : (
+                    <p className="text-center text-custom-text-200">No options available.</p>
+                  )}
+                </Combobox.Options>
+              </div>
+            </>
+          );
+        }}
+      </Combobox>
+    );
+  }
+);
diff --git a/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
new file mode 100644
index 000000000..2be3abc56
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/cycle-layout-root.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+// next imports
+import { useRouter } from "next/router";
+// swr
+import useSWR from "swr";
+// mobx react lite
+import { observer } from "mobx-react-lite";
+// components
+import {
+  CycleAppliedFiltersRoot,
+  CycleCalendarLayout,
+  CycleGanttLayout,
+  CycleKanBanLayout,
+  CycleListLayout,
+  CycleSpreadsheetLayout,
+} from "components/issues";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export const CycleLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    cycleId: string;
+  };
+
+  const {
+    project: projectStore,
+    issueFilter: issueFilterStore,
+    cycleIssue: cycleIssueStore,
+    cycleIssueFilter: cycleIssueFilterStore,
+  } = useMobxStore();
+
+  useSWR(workspaceSlug && projectId && cycleId ? `CYCLE_ISSUES` : null, async () => {
+    if (workspaceSlug && projectId && cycleId) {
+      // fetching the project display filters and display properties
+      await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
+      // fetching the cycle filters
+      await cycleIssueFilterStore.fetchCycleFilters(workspaceSlug, projectId, cycleId);
+
+      // fetching the project state, labels and members
+      await projectStore.fetchProjectStates(workspaceSlug, projectId);
+      await projectStore.fetchProjectLabels(workspaceSlug, projectId);
+      await projectStore.fetchProjectMembers(workspaceSlug, projectId);
+
+      // fetching the cycle issues
+      await cycleIssueStore.fetchIssues(workspaceSlug, projectId, cycleId);
+    }
+  });
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <CycleAppliedFiltersRoot />
+      <div className="w-full h-full overflow-auto">
+        {activeLayout === "list" ? (
+          <CycleListLayout />
+        ) : activeLayout === "kanban" ? (
+          <CycleKanBanLayout />
+        ) : activeLayout === "calendar" ? (
+          <CycleCalendarLayout />
+        ) : activeLayout === "gantt_chart" ? (
+          <CycleGanttLayout />
+        ) : activeLayout === "spreadsheet" ? (
+          <CycleSpreadsheetLayout />
+        ) : null}
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx b/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
new file mode 100644
index 000000000..ff72eae3c
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/global-view-layout-root.tsx
@@ -0,0 +1,88 @@
+import React, { useCallback } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { SpreadsheetView } from "components/core";
+import { GlobalViewsAppliedFiltersRoot } from "components/issues";
+// types
+import { IIssueDisplayFilterOptions, TStaticViewTypes } from "types";
+// fetch-keys
+import { GLOBAL_VIEW_ISSUES } from "constants/fetch-keys";
+
+type Props = {
+  type?: TStaticViewTypes;
+};
+
+export const GlobalViewLayoutRoot: React.FC<Props> = observer((props) => {
+  const { type } = props;
+
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const {
+    globalViews: globalViewsStore,
+    globalViewIssues: globalViewIssuesStore,
+    globalViewFilters: globalViewFiltersStore,
+    workspaceFilter: workspaceFilterStore,
+  } = useMobxStore();
+
+  const viewDetails = globalViewId ? globalViewsStore.globalViewDetails[globalViewId.toString()] : undefined;
+
+  const storedFilters = globalViewId ? globalViewFiltersStore.storedFilters[globalViewId.toString()] : undefined;
+
+  useSWR(
+    workspaceSlug && globalViewId && viewDetails ? GLOBAL_VIEW_ISSUES(globalViewId.toString()) : null,
+    workspaceSlug && globalViewId && viewDetails
+      ? () => {
+          globalViewIssuesStore.fetchViewIssues(workspaceSlug.toString(), globalViewId.toString(), storedFilters ?? {});
+        }
+      : null
+  );
+
+  useSWR(
+    workspaceSlug && type ? GLOBAL_VIEW_ISSUES(type) : null,
+    workspaceSlug && type
+      ? () => {
+          globalViewIssuesStore.fetchStaticIssues(workspaceSlug.toString(), type);
+        }
+      : null
+  );
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug) return;
+
+      workspaceFilterStore.updateWorkspaceFilters(workspaceSlug.toString(), {
+        display_filters: updatedDisplayFilter,
+      });
+    },
+    [workspaceFilterStore, workspaceSlug]
+  );
+
+  const issues = type
+    ? globalViewIssuesStore.viewIssues?.[type]
+    : globalViewId
+    ? globalViewIssuesStore.viewIssues?.[globalViewId.toString()]
+    : undefined;
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <GlobalViewsAppliedFiltersRoot />
+      <div className="h-full w-full overflow-auto">
+        <SpreadsheetView
+          displayProperties={workspaceFilterStore.workspaceDisplayProperties}
+          displayFilters={workspaceFilterStore.workspaceDisplayFilters}
+          handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
+          issues={issues}
+          handleIssueAction={() => {}}
+          handleUpdateIssue={() => {}}
+          disableUserActions={false}
+        />
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/roots/index.ts b/web/components/issues/issue-layouts/roots/index.ts
new file mode 100644
index 000000000..742bc43b9
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/index.ts
@@ -0,0 +1,5 @@
+export * from "./cycle-layout-root";
+export * from "./global-view-layout-root";
+export * from "./module-layout-root";
+export * from "./project-layout-root";
+export * from "./project-view-layout-root";
diff --git a/web/components/issues/issue-layouts/roots/module-layout-root.tsx b/web/components/issues/issue-layouts/roots/module-layout-root.tsx
new file mode 100644
index 000000000..74410a952
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/module-layout-root.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  ModuleAppliedFiltersRoot,
+  ModuleCalendarLayout,
+  ModuleGanttLayout,
+  ModuleKanBanLayout,
+  ModuleListLayout,
+  ModuleSpreadsheetLayout,
+} from "components/issues";
+
+export const ModuleLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    moduleId: string;
+  };
+
+  const {
+    project: projectStore,
+    issueFilter: issueFilterStore,
+    moduleIssue: moduleIssueStore,
+    moduleFilter: moduleIssueFilterStore,
+  } = useMobxStore();
+
+  useSWR(workspaceSlug && projectId && moduleId ? `MODULE_INFORMATION_${moduleId.toString()}` : null, async () => {
+    if (workspaceSlug && projectId && moduleId) {
+      // fetching the project display filters and display properties
+      await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
+      // fetching the module filters
+      await moduleIssueFilterStore.fetchModuleFilters(workspaceSlug, projectId, moduleId);
+
+      // fetching the project state, labels and members
+      await projectStore.fetchProjectStates(workspaceSlug, projectId);
+      await projectStore.fetchProjectLabels(workspaceSlug, projectId);
+      await projectStore.fetchProjectMembers(workspaceSlug, projectId);
+
+      // fetching the module issues
+      await moduleIssueStore.fetchIssues(workspaceSlug, projectId, moduleId);
+    }
+  });
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <ModuleAppliedFiltersRoot />
+      <div className="h-full w-full overflow-auto">
+        {activeLayout === "list" ? (
+          <ModuleListLayout />
+        ) : activeLayout === "kanban" ? (
+          <ModuleKanBanLayout />
+        ) : activeLayout === "calendar" ? (
+          <ModuleCalendarLayout />
+        ) : activeLayout === "gantt_chart" ? (
+          <ModuleGanttLayout />
+        ) : activeLayout === "spreadsheet" ? (
+          <ModuleSpreadsheetLayout />
+        ) : null}
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/roots/project-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
new file mode 100644
index 000000000..576c6f9f2
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/project-layout-root.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  ListLayout,
+  CalendarLayout,
+  GanttLayout,
+  KanBanLayout,
+  ProjectAppliedFiltersRoot,
+  SpreadsheetLayout,
+} from "components/issues";
+
+export const ProjectLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query as {
+    workspaceSlug: string;
+    projectId: string;
+    cycleId: string;
+    moduleId: string;
+  };
+
+  const { issue: issueStore, project: projectStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_ISSUES` : null,
+    async () => {
+      if (workspaceSlug && projectId) {
+        await issueFilterStore.fetchUserProjectFilters(workspaceSlug, projectId);
+
+        await projectStore.fetchProjectStates(workspaceSlug, projectId);
+        await projectStore.fetchProjectLabels(workspaceSlug, projectId);
+        await projectStore.fetchProjectMembers(workspaceSlug, projectId);
+        await projectStore.fetchProjectEstimates(workspaceSlug, projectId);
+
+        await issueStore.fetchIssues(workspaceSlug, projectId);
+      }
+    },
+    { revalidateOnFocus: false }
+  );
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  return (
+    <div className="relative w-full h-full flex flex-col overflow-hidden">
+      <ProjectAppliedFiltersRoot />
+      <div className="w-full h-full overflow-auto">
+        {activeLayout === "list" ? (
+          <ListLayout />
+        ) : activeLayout === "kanban" ? (
+          <KanBanLayout />
+        ) : activeLayout === "calendar" ? (
+          <CalendarLayout />
+        ) : activeLayout === "gantt_chart" ? (
+          <GanttLayout />
+        ) : activeLayout === "spreadsheet" ? (
+          <SpreadsheetLayout />
+        ) : null}
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
new file mode 100644
index 000000000..8ad7428a2
--- /dev/null
+++ b/web/components/issues/issue-layouts/roots/project-view-layout-root.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import {
+  ModuleKanBanLayout,
+  ModuleListLayout,
+  ProjectViewAppliedFiltersRoot,
+  ProjectViewCalendarLayout,
+  ProjectViewGanttLayout,
+  ProjectViewSpreadsheetLayout,
+} from "components/issues";
+
+export const ProjectViewLayoutRoot: React.FC = observer(() => {
+  const router = useRouter();
+  const { workspaceSlug, projectId, viewId } = router.query;
+
+  const {
+    project: projectStore,
+    issueFilter: issueFilterStore,
+    projectViews: projectViewsStore,
+    projectViewIssues: projectViewIssuesStore,
+    projectViewFilters: projectViewFiltersStore,
+  } = useMobxStore();
+
+  useSWR(workspaceSlug && projectId && viewId ? `PROJECT_VIEW_INFORMATION_${viewId.toString()}` : null, async () => {
+    if (workspaceSlug && projectId && viewId) {
+      // fetching the project display filters and display properties
+      await issueFilterStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString());
+
+      // fetching the project state, labels and members
+      await projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString());
+      await projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString());
+      await projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString());
+
+      // fetching the view details
+      await projectViewsStore.fetchViewDetails(workspaceSlug.toString(), projectId.toString(), viewId.toString());
+      // fetching the view issues
+      await projectViewIssuesStore.fetchViewIssues(
+        workspaceSlug.toString(),
+        projectId.toString(),
+        viewId.toString(),
+        projectViewFiltersStore.storedFilters[viewId.toString()] ?? {}
+      );
+    }
+  });
+
+  const activeLayout = issueFilterStore.userDisplayFilters.layout;
+
+  return (
+    <div className="relative h-full w-full flex flex-col overflow-hidden">
+      <ProjectViewAppliedFiltersRoot />
+      <div className="h-full w-full overflow-y-auto">
+        {activeLayout === "list" ? (
+          <ModuleListLayout />
+        ) : activeLayout === "kanban" ? (
+          <ModuleKanBanLayout />
+        ) : activeLayout === "calendar" ? (
+          <ProjectViewCalendarLayout />
+        ) : activeLayout === "gantt_chart" ? (
+          <ProjectViewGanttLayout />
+        ) : activeLayout === "spreadsheet" ? (
+          <ProjectViewSpreadsheetLayout />
+        ) : null}
+      </div>
+    </div>
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/cycle-root.tsx b/web/components/issues/issue-layouts/spreadsheet/cycle-root.tsx
new file mode 100644
index 000000000..7478b9c61
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/cycle-root.tsx
@@ -0,0 +1,146 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useUser from "hooks/use-user";
+import useProjectDetails from "hooks/use-project-details";
+// components
+// import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
+import { IssuePeekOverview } from "components/issues";
+// ui
+import { CustomMenu } from "components/ui";
+import { Spinner } from "@plane/ui";
+// icon
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
+import { IIssueUnGroupedStructure } from "store/issue";
+// constants
+import { SPREADSHEET_COLUMN } from "constants/spreadsheet";
+
+export const CycleSpreadsheetLayout: React.FC = observer(() => {
+  const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
+
+  const { cycleIssue: cycleIssueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const issues = cycleIssueStore.getIssues;
+  const issueDisplayProperties = issueFilterStore.userDisplayProperties;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const columnData = SPREADSHEET_COLUMN.map((column) => ({
+    ...column,
+    isActive: issueDisplayProperties
+      ? column.propertyName === "labels"
+        ? issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
+        : column.propertyName === "title"
+        ? true
+        : issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
+      : false,
+  }));
+
+  const gridTemplateColumns = columnData
+    .filter((column) => column.isActive)
+    .map((column) => column.colSize)
+    .join(" ");
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <IssuePeekOverview
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={!isAllowed}
+      />
+      <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+        <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
+          {/* <SpreadsheetColumns
+            columnData={columnData}
+            displayFilters={issueFilterStore.userDisplayFilters}
+            gridTemplateColumns={gridTemplateColumns}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+          /> */}
+        </div>
+        {issues ? (
+          <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
+            {(issues as IIssueUnGroupedStructure).map((issue: IIssue, index) => (
+              <></>
+              // <SpreadsheetIssues
+              //   key={`${issue.id}_${index}`}
+              //   index={index}
+              //   issue={issue}
+              //   expandedIssues={expandedIssues}
+              //   setExpandedIssues={setExpandedIssues}
+              //   gridTemplateColumns={gridTemplateColumns}
+              //   properties={issueDisplayProperties}
+              //   handleIssueAction={() => {}}
+              //   disableUserActions={!isAllowed}
+              //   user={user}
+              //   userAuth={{
+              //     isViewer: projectDetails?.member_role === 5,
+              //     isGuest: projectDetails?.member_role === 10,
+              //     isMember: projectDetails?.member_role === 15,
+              //     isOwner: projectDetails?.member_role === 20,
+              //   }}
+              // />
+            ))}
+            <div
+              className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
+              style={{ gridTemplateColumns }}
+            >
+              {isAllowed && (
+                <CustomMenu
+                  className="sticky left-0 z-[1]"
+                  customButton={
+                    <button
+                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+                      type="button"
+                    >
+                      <PlusIcon className="h-4 w-4" />
+                      Add Issue
+                    </button>
+                  }
+                  optionsClassName="left-5 !w-36"
+                  noBorder
+                >
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      const e = new KeyboardEvent("keydown", { key: "c" });
+                      document.dispatchEvent(e);
+                    }}
+                  >
+                    Create new
+                  </CustomMenu.MenuItem>
+                  {true && <CustomMenu.MenuItem onClick={() => {}}>Add an existing issue</CustomMenu.MenuItem>}
+                </CustomMenu>
+              )}
+            </div>
+          </div>
+        ) : (
+          <Spinner />
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/index.ts b/web/components/issues/issue-layouts/spreadsheet/index.ts
new file mode 100644
index 000000000..89cf064a4
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/index.ts
@@ -0,0 +1,4 @@
+export * from "./cycle-root";
+export * from "./module-root";
+export * from "./project-view-root";
+export * from "./root";
diff --git a/web/components/issues/issue-layouts/spreadsheet/module-root.tsx b/web/components/issues/issue-layouts/spreadsheet/module-root.tsx
new file mode 100644
index 000000000..d82289baf
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/module-root.tsx
@@ -0,0 +1,146 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useUser from "hooks/use-user";
+import useProjectDetails from "hooks/use-project-details";
+// components
+// import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
+import { IssuePeekOverview } from "components/issues";
+// ui
+import { CustomMenu } from "components/ui";
+import { Spinner } from "@plane/ui";
+// icon
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
+import { IIssueUnGroupedStructure } from "store/issue";
+// constants
+import { SPREADSHEET_COLUMN } from "constants/spreadsheet";
+
+export const ModuleSpreadsheetLayout: React.FC = observer(() => {
+  const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
+
+  const { moduleIssue: moduleIssueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const issues = moduleIssueStore.getIssues;
+  const issueDisplayProperties = issueFilterStore.userDisplayProperties;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const columnData = SPREADSHEET_COLUMN.map((column) => ({
+    ...column,
+    isActive: issueDisplayProperties
+      ? column.propertyName === "labels"
+        ? issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
+        : column.propertyName === "title"
+        ? true
+        : issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
+      : false,
+  }));
+
+  const gridTemplateColumns = columnData
+    .filter((column) => column.isActive)
+    .map((column) => column.colSize)
+    .join(" ");
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <IssuePeekOverview
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={!isAllowed}
+      />
+      <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+        <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
+          {/* <SpreadsheetColumns
+            columnData={columnData}
+            displayFilters={issueFilterStore.userDisplayFilters}
+            gridTemplateColumns={gridTemplateColumns}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+          /> */}
+        </div>
+        {issues ? (
+          <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
+            {(issues as IIssueUnGroupedStructure).map((issue: IIssue, index) => (
+              <></>
+              // <SpreadsheetIssues
+              //   key={`${issue.id}_${index}`}
+              //   index={index}
+              //   issue={issue}
+              //   expandedIssues={expandedIssues}
+              //   setExpandedIssues={setExpandedIssues}
+              //   gridTemplateColumns={gridTemplateColumns}
+              //   properties={issueDisplayProperties}
+              //   handleIssueAction={() => {}}
+              //   disableUserActions={!isAllowed}
+              //   user={user}
+              //   userAuth={{
+              //     isViewer: projectDetails?.member_role === 5,
+              //     isGuest: projectDetails?.member_role === 10,
+              //     isMember: projectDetails?.member_role === 15,
+              //     isOwner: projectDetails?.member_role === 20,
+              //   }}
+              // />
+            ))}
+            <div
+              className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
+              style={{ gridTemplateColumns }}
+            >
+              {isAllowed && (
+                <CustomMenu
+                  className="sticky left-0 z-[1]"
+                  customButton={
+                    <button
+                      className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+                      type="button"
+                    >
+                      <PlusIcon className="h-4 w-4" />
+                      Add Issue
+                    </button>
+                  }
+                  optionsClassName="left-5 !w-36"
+                  noBorder
+                >
+                  <CustomMenu.MenuItem
+                    onClick={() => {
+                      const e = new KeyboardEvent("keydown", { key: "c" });
+                      document.dispatchEvent(e);
+                    }}
+                  >
+                    Create new
+                  </CustomMenu.MenuItem>
+                  {true && <CustomMenu.MenuItem onClick={() => {}}>Add an existing issue</CustomMenu.MenuItem>}
+                </CustomMenu>
+              )}
+            </div>
+          </div>
+        ) : (
+          <Spinner />
+        )}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/project-view-root.tsx b/web/components/issues/issue-layouts/spreadsheet/project-view-root.tsx
new file mode 100644
index 000000000..cbfabeb6e
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/project-view-root.tsx
@@ -0,0 +1,128 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useUser from "hooks/use-user";
+import useProjectDetails from "hooks/use-project-details";
+// components
+// import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
+import { IssuePeekOverview } from "components/issues";
+// ui
+import { Spinner } from "components/ui";
+// icon
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
+import { IIssueUnGroupedStructure } from "store/issue";
+// constants
+import { SPREADSHEET_COLUMN } from "constants/spreadsheet";
+
+export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
+  const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
+
+  const { module: moduleStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  // const issues = moduleStore.issues || [];
+  const issueDisplayProperties = issueFilterStore.userDisplayProperties;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const columnData = SPREADSHEET_COLUMN.map((column) => ({
+    ...column,
+    isActive: issueDisplayProperties
+      ? column.propertyName === "labels"
+        ? issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
+        : column.propertyName === "title"
+        ? true
+        : issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
+      : false,
+  }));
+
+  const gridTemplateColumns = columnData
+    .filter((column) => column.isActive)
+    .map((column) => column.colSize)
+    .join(" ");
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <IssuePeekOverview
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={!isAllowed}
+      />
+      <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+        <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
+          {/* <SpreadsheetColumns
+            columnData={columnData}
+            displayFilters={issueFilterStore.userDisplayFilters}
+            gridTemplateColumns={gridTemplateColumns}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+          /> */}
+        </div>
+        {/* {issues ? (
+          <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
+            {(issues as IIssueUnGroupedStructure).map((issue: IIssue, index) => (
+              <SpreadsheetIssues
+                key={`${issue.id}_${index}`}
+                index={index}
+                issue={issue}
+                expandedIssues={expandedIssues}
+                setExpandedIssues={setExpandedIssues}
+                gridTemplateColumns={gridTemplateColumns}
+                properties={issueDisplayProperties}
+                handleIssueAction={() => {}}
+                disableUserActions={!isAllowed}
+                user={user}
+                userAuth={{
+                  isViewer: projectDetails?.member_role === 5,
+                  isGuest: projectDetails?.member_role === 10,
+                  isMember: projectDetails?.member_role === 15,
+                  isOwner: projectDetails?.member_role === 20,
+                }}
+              />
+            ))}
+            <div
+              className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
+              style={{ gridTemplateColumns }}
+            >
+              <button
+                className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+                onClick={() => {
+                  const e = new KeyboardEvent("keydown", { key: "c" });
+                  document.dispatchEvent(e);
+                }}
+              >
+                <PlusIcon className="h-4 w-4" />
+                Add Issue
+              </button>
+            </div>
+          </div>
+        ) : (
+          <Spinner />
+        )} */}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/issue-layouts/spreadsheet/root.tsx b/web/components/issues/issue-layouts/spreadsheet/root.tsx
new file mode 100644
index 000000000..6c14ebf69
--- /dev/null
+++ b/web/components/issues/issue-layouts/spreadsheet/root.tsx
@@ -0,0 +1,161 @@
+import React, { useCallback, useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useUser from "hooks/use-user";
+import useProjectDetails from "hooks/use-project-details";
+// components
+// import { SpreadsheetColumns, SpreadsheetIssues } from "components/core";
+import { IssuePeekOverview } from "components/issues";
+// ui
+import { CustomMenu } from "components/ui";
+import { Spinner } from "@plane/ui";
+// icon
+import { PlusIcon } from "@heroicons/react/24/outline";
+// types
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties } from "types";
+import { IIssueUnGroupedStructure } from "store/issue";
+// constants
+import { SPREADSHEET_COLUMN } from "constants/spreadsheet";
+
+export const SpreadsheetLayout: React.FC = observer(() => {
+  const [expandedIssues, setExpandedIssues] = useState<string[]>([]);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
+
+  const { user } = useUser();
+  const { projectDetails } = useProjectDetails();
+
+  const { issue: issueStore, issueFilter: issueFilterStore } = useMobxStore();
+
+  const issues = issueStore.getIssues;
+  const issueDisplayProperties = issueFilterStore.userDisplayProperties;
+
+  const handleDisplayFiltersUpdate = useCallback(
+    (updatedDisplayFilter: Partial<IIssueDisplayFilterOptions>) => {
+      if (!workspaceSlug || !projectId) return;
+
+      issueFilterStore.updateUserFilters(workspaceSlug.toString(), projectId.toString(), {
+        display_filters: {
+          ...updatedDisplayFilter,
+        },
+      });
+    },
+    [issueFilterStore, projectId, workspaceSlug]
+  );
+
+  const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
+
+  const columnData = SPREADSHEET_COLUMN.map((column) => ({
+    ...column,
+    isActive: issueDisplayProperties
+      ? column.propertyName === "labels"
+        ? issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
+        : column.propertyName === "title"
+        ? true
+        : issueDisplayProperties[column.propertyName as keyof IIssueDisplayProperties]
+      : false,
+  }));
+
+  const gridTemplateColumns = columnData
+    .filter((column) => column.isActive)
+    .map((column) => column.colSize)
+    .join(" ");
+
+  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
+
+  return (
+    <>
+      <IssuePeekOverview
+        projectId={projectId?.toString() ?? ""}
+        workspaceSlug={workspaceSlug?.toString() ?? ""}
+        readOnly={!isAllowed}
+      />
+      <div className="h-full rounded-lg text-custom-text-200 overflow-x-auto whitespace-nowrap bg-custom-background-100">
+        <div className="sticky z-[2] top-0 border-b border-custom-border-200 bg-custom-background-90 w-full min-w-max">
+          {/* <SpreadsheetColumns
+            columnData={columnData}
+            displayFilters={issueFilterStore.userDisplayFilters}
+            gridTemplateColumns={gridTemplateColumns}
+            handleDisplayFiltersUpdate={handleDisplayFiltersUpdate}
+          /> */}
+        </div>
+        {/* {issues ? (
+          <div className="flex flex-col h-full w-full bg-custom-background-100 rounded-sm ">
+            {(issues as IIssueUnGroupedStructure).map((issue: IIssue, index) => (
+              <SpreadsheetIssues
+                key={`${issue.id}_${index}`}
+                index={index}
+                issue={issue}
+                expandedIssues={expandedIssues}
+                setExpandedIssues={setExpandedIssues}
+                gridTemplateColumns={gridTemplateColumns}
+                properties={issueDisplayProperties}
+                handleIssueAction={() => {}}
+                disableUserActions={!isAllowed}
+                user={user}
+                userAuth={{
+                  isViewer: projectDetails?.member_role === 5,
+                  isGuest: projectDetails?.member_role === 10,
+                  isMember: projectDetails?.member_role === 15,
+                  isOwner: projectDetails?.member_role === 20,
+                }}
+              />
+            ))}
+            <div
+              className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
+              style={{ gridTemplateColumns }}
+            >
+              {type === "issue" ? (
+                <button
+                  className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+                  onClick={() => {
+                    const e = new KeyboardEvent("keydown", { key: "c" });
+                    document.dispatchEvent(e);
+                  }}
+                >
+                  <PlusIcon className="h-4 w-4" />
+                  Add Issue
+                </button>
+              ) : (
+                isAllowed && (
+                  <CustomMenu
+                    className="sticky left-0 z-[1]"
+                    customButton={
+                      <button
+                        className="flex gap-1.5 items-center  pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
+                        type="button"
+                      >
+                        <PlusIcon className="h-4 w-4" />
+                        Add Issue
+                      </button>
+                    }
+                    position="left"
+                    optionsClassName="left-5 !w-36"
+                    noBorder
+                  >
+                    <CustomMenu.MenuItem
+                      onClick={() => {
+                        const e = new KeyboardEvent("keydown", { key: "c" });
+                        document.dispatchEvent(e);
+                      }}
+                    >
+                      Create new
+                    </CustomMenu.MenuItem>
+                    {true && <CustomMenu.MenuItem onClick={() => {}}>Add an existing issue</CustomMenu.MenuItem>}
+                  </CustomMenu>
+                )
+              )}
+            </div>
+          </div>
+        ) : (
+          <Spinner />
+        )} */}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/issues/label.tsx b/web/components/issues/label.tsx
index 75a08ba0f..776011d57 100644
--- a/web/components/issues/label.tsx
+++ b/web/components/issues/label.tsx
@@ -1,9 +1,6 @@
 import React from "react";
-
 // components
-import { Tooltip } from "components/ui";
-// types
-import { IIssue } from "types";
+import { Tooltip } from "@plane/ui";
 
 type Props = {
   labelDetails: any[];
@@ -36,11 +33,7 @@ export const ViewIssueLabel: React.FC<Props> = ({ labelDetails, maxRender = 1 })
         </>
       ) : (
         <div className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
-          <Tooltip
-            position="top"
-            tooltipHeading="Labels"
-            tooltipContent={labelDetails.map((l) => l.name).join(", ")}
-          >
+          <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labelDetails.map((l) => l.name).join(", ")}>
             <div className="flex items-center gap-1.5 text-custom-text-200">
               <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
               {`${labelDetails.length} Labels`}
diff --git a/web/components/issues/main-content.tsx b/web/components/issues/main-content.tsx
index 810f8fc95..f77146d37 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/issues.service";
+import { IssueService, IssueCommentService } from "services/issue";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
@@ -37,11 +37,11 @@ type Props = {
   uneditable?: boolean;
 };
 
-export const IssueMainContent: React.FC<Props> = ({
-  issueDetails,
-  submitChanges,
-  uneditable = false,
-}) => {
+// 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;
 
@@ -55,12 +55,7 @@ export const IssueMainContent: React.FC<Props> = ({
   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);
@@ -68,27 +63,15 @@ export const IssueMainContent: React.FC<Props> = ({
   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
-      .patchIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        commentId,
-        data,
-        user
-      )
+    await issueCommentService
+      .patchIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId, data, user)
       .then(() => mutateIssueActivity());
   };
 
@@ -97,28 +80,16 @@ export const IssueMainContent: React.FC<Props> = ({
 
     mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
 
-    await issuesService
-      .deleteIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        commentId,
-        user
-      )
+    await issueCommentService
+      .deleteIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId, user)
       .then(() => mutateIssueActivity());
   };
 
   const handleAddComment = async (formData: IIssueComment) => {
     if (!workspaceSlug || !issueDetails) return;
 
-    await issuesService
-      .createIssueComment(
-        workspaceSlug.toString(),
-        issueDetails.project,
-        issueDetails.id,
-        formData,
-        user
-      )
+    await issueCommentService
+      .createIssueComment(workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData, user)
       .then(() => {
         mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
       })
@@ -148,8 +119,7 @@ export const IssueMainContent: React.FC<Props> = ({
                     }}
                   />
                   <span className="flex-shrink-0 text-custom-text-200">
-                    {issueDetails.parent_detail?.project_detail.identifier}-
-                    {issueDetails.parent_detail?.sequence_id}
+                    {issueDetails.parent_detail?.project_detail.identifier}-{issueDetails.parent_detail?.sequence_id}
                   </span>
                 </div>
                 <span className="truncate text-custom-text-100">
@@ -169,9 +139,7 @@ export const IssueMainContent: React.FC<Props> = ({
                       <CustomMenu.MenuItem
                         key={issue.id}
                         renderAs="a"
-                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${
-                          issue.id
-                        }`}
+                        href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`}
                         className="flex items-center gap-2 py-2"
                       >
                         <LayerDiagonalIcon className="h-4 w-4" />
diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
index cf6f811f6..31d19354d 100644
--- a/web/components/issues/modal.tsx
+++ b/web/components/issues/modal.tsx
@@ -1,26 +1,19 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import modulesService from "services/modules.service";
-import issuesService from "services/issues.service";
-import inboxServices from "services/inbox.service";
+import { ModuleService } from "services/module.service";
+import { IssueService, IssueDraftService } from "services/issue";
+import { InboxService } from "services/inbox.service";
 // hooks
 import useUser from "hooks/use-user";
 import useIssuesView from "hooks/use-issues-view";
-import useCalendarIssuesView from "hooks/use-calendar-issues-view";
 import useToast from "hooks/use-toast";
 import useInboxView from "hooks/use-inbox-view";
-import useSpreadsheetIssuesView from "hooks/use-spreadsheet-issues-view";
 import useProjects from "hooks/use-projects";
 import useMyIssues from "hooks/my-issues/use-my-issues";
 import useLocalStorage from "hooks/use-local-storage";
-import { useWorkspaceView } from "hooks/use-workspace-view";
 // components
 import { IssueForm, ConfirmIssueDiscard } from "components/issues";
 // types
@@ -38,7 +31,7 @@ import {
   VIEW_ISSUES,
   INBOX_ISSUES,
   PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS,
-  WORKSPACE_VIEW_ISSUES,
+  GLOBAL_VIEW_ISSUES,
 } from "constants/fetch-keys";
 // constants
 import { INBOX_ISSUE_SOURCE } from "constants/inbox";
@@ -66,6 +59,11 @@ export interface IssuesModalProps {
   onSubmit?: (data: Partial<IIssue>) => Promise<void>;
 }
 
+const moduleService = new ModuleService();
+const inboxService = new InboxService();
+const issueService = new IssueService();
+const issueDraftService = new IssueDraftService();
+
 export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   data,
   handleClose,
@@ -83,24 +81,23 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const [prePopulateData, setPreloadedData] = useState<Partial<IIssue>>({});
 
   const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId, inboxId } =
-    router.query;
+  const { workspaceSlug, projectId, cycleId, moduleId, viewId, globalViewId, inboxId } = router.query;
 
   const { displayFilters, params } = useIssuesView();
-  const { params: calendarParams } = useCalendarIssuesView();
   const { ...viewGanttParams } = params;
   const { params: inboxParams } = useInboxView();
-  const { params: spreadsheetParams } = useSpreadsheetIssuesView();
 
   const { user } = useUser();
   const { projects } = useProjects();
 
   const { groupedIssues, mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
 
-  const { params: globalViewParams } = useWorkspaceView();
+  const globalViewParams = {};
 
-  const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } =
-    useLocalStorage<any>("draftedIssue", {});
+  const { setValue: setValueInLocalStorage, clearValue: clearLocalStorageValue } = useLocalStorage<any>(
+    "draftedIssue",
+    {}
+  );
 
   const { setToastAlert } = useToast();
 
@@ -199,7 +196,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const addIssueToCycle = async (issueId: string, cycleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    await issuesService
+    await issueService
       .addIssueToCycle(
         workspaceSlug as string,
         activeProject ?? "",
@@ -220,7 +217,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const addIssueToModule = async (issueId: string, moduleId: string) => {
     if (!workspaceSlug || !activeProject) return;
 
-    await modulesService
+    await moduleService
       .addIssuesToModule(
         workspaceSlug as string,
         activeProject ?? "",
@@ -251,14 +248,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
       source: INBOX_ISSUE_SOURCE,
     };
 
-    await inboxServices
-      .createInboxIssue(
-        workspaceSlug.toString(),
-        activeProject.toString(),
-        inboxId.toString(),
-        payload,
-        user
-      )
+    await inboxService
+      .createInboxIssue(workspaceSlug.toString(), activeProject.toString(), inboxId.toString(), payload, user)
       .then((res) => {
         setToastAlert({
           type: "success",
@@ -311,25 +302,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
     },
   ];
 
-  const currentWorkspaceIssuePath = workspaceIssuesPath.find((path) =>
-    router.pathname.includes(path.path)
-  );
-
-  const calendarFetchKey = cycleId
-    ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams)
-    : moduleId
-    ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams)
-    : viewId
-    ? VIEW_ISSUES(viewId.toString(), calendarParams)
-    : PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", calendarParams);
-
-  const spreadsheetFetchKey = cycleId
-    ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams)
-    : moduleId
-    ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams)
-    : viewId
-    ? VIEW_ISSUES(viewId.toString(), spreadsheetParams)
-    : PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject?.toString() ?? "", spreadsheetParams);
+  const currentWorkspaceIssuePath = workspaceIssuesPath.find((path) => router.pathname.includes(path.path));
 
   const ganttFetchKey = cycleId
     ? CYCLE_ISSUES_WITH_PARAMS(cycleId.toString())
@@ -344,21 +317,18 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
     if (inboxId) await addIssueToInbox(payload);
     else
-      await issuesService
+      await issueService
         .createIssues(workspaceSlug as string, activeProject ?? "", payload, user)
         .then(async (res) => {
           mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
           if (payload.cycle && payload.cycle !== "") await addIssueToCycle(res.id, payload.cycle);
-          if (payload.module && payload.module !== "")
-            await addIssueToModule(res.id, payload.module);
+          if (payload.module && payload.module !== "") await addIssueToModule(res.id, payload.module);
 
-          if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
           if (displayFilters.layout === "gantt_chart")
             mutate(ganttFetchKey, {
               start_target_date: true,
               order_by: "sort_order",
             });
-          if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
           if (groupedIssues) mutateMyIssues();
 
           setToastAlert({
@@ -372,13 +342,9 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
 
           if (payload.parent && payload.parent !== "") mutate(SUB_ISSUES(payload.parent));
 
-          if (globalViewId)
-            mutate(WORKSPACE_VIEW_ISSUES(globalViewId.toString(), globalViewParams));
+          if (globalViewId) mutate(GLOBAL_VIEW_ISSUES(globalViewId.toString()));
 
-          if (currentWorkspaceIssuePath)
-            mutate(
-              WORKSPACE_VIEW_ISSUES(workspaceSlug.toString(), currentWorkspaceIssuePath?.params)
-            );
+          if (currentWorkspaceIssuePath) mutate(GLOBAL_VIEW_ISSUES(workspaceSlug.toString()));
         })
         .catch(() => {
           setToastAlert({
@@ -398,8 +364,8 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
       ...formDirtyState,
     };
 
-    await issuesService
-      .createDraftIssue(workspaceSlug as string, activeProject ?? "", payload, user)
+    await issueDraftService
+      .createDraftIssue(workspaceSlug as string, activeProject ?? "", payload)
       .then(() => {
         mutate(PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
         if (groupedIssues) mutateMyIssues();
@@ -432,14 +398,12 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({
   const updateIssue = async (payload: Partial<IIssue>) => {
     if (!user) return;
 
-    await issuesService
+    await issueService
       .patchIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload, user)
       .then((res) => {
         if (isUpdatingSingleIssue) {
           mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
         } else {
-          if (displayFilters.layout === "calendar") mutate(calendarFetchKey);
-          if (displayFilters.layout === "spreadsheet") mutate(spreadsheetFetchKey);
           if (payload.parent) mutate(SUB_ISSUES(payload.parent.toString()));
           mutate(PROJECT_ISSUES_LIST_WITH_PARAMS(activeProject ?? "", params));
         }
diff --git a/web/components/issues/my-issues/my-issues-select-filters.tsx b/web/components/issues/my-issues/my-issues-select-filters.tsx
index ce8e03797..e165a7d6c 100644
--- a/web/components/issues/my-issues/my-issues-select-filters.tsx
+++ b/web/components/issues/my-issues/my-issues-select-filters.tsx
@@ -1,11 +1,8 @@
 import { useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import issuesService from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // components
 import { DateFilterModal } from "components/core";
 // ui
@@ -15,7 +12,7 @@ import { PriorityIcon, StateGroupIcon } from "components/icons";
 // helpers
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { IIssueFilterOptions, IQuery, TStateGroups } from "types";
+import { IIssueFilterOptions, TStateGroups } from "types";
 // fetch-keys
 import { WORKSPACE_LABELS } from "constants/fetch-keys";
 // constants
@@ -23,18 +20,15 @@ import { GROUP_CHOICES, PRIORITIES } from "constants/project";
 import { DATE_FILTER_OPTIONS } from "constants/filters";
 
 type Props = {
-  filters: Partial<IIssueFilterOptions> | IQuery;
+  filters: Partial<IIssueFilterOptions> | any;
   onSelect: (option: any) => void;
   direction?: "left" | "right";
   height?: "sm" | "md" | "rg" | "lg";
 };
 
-export const MyIssuesSelectFilters: React.FC<Props> = ({
-  filters,
-  onSelect,
-  direction = "right",
-  height = "md",
-}) => {
+const issueLabelService = new IssueLabelService();
+
+export const MyIssuesSelectFilters: React.FC<Props> = ({ filters, onSelect, direction = "right", height = "md" }) => {
   const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
   const [dateFilterType, setDateFilterType] = useState<{
     title: string;
@@ -50,14 +44,12 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
 
   const { data: labels } = useSWR(
     workspaceSlug && fetchLabels ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug && fetchLabels
-      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
-      : null
+    workspaceSlug && fetchLabels ? () => issueLabelService.getWorkspaceIssueLabels(workspaceSlug.toString()) : null
   );
 
   return (
     <>
-      {isDateFilterModalOpen && (
+      {/* {isDateFilterModalOpen && (
         <DateFilterModal
           title={dateFilterType.title}
           field={dateFilterType.type}
@@ -66,7 +58,7 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
           isOpen={isDateFilterModalOpen}
           onSelect={onSelect}
         />
-      )}
+      )} */}
       <MultiLevelDropdown
         label="Filters"
         onSelect={onSelect}
@@ -155,7 +147,7 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
                   key: "start_date",
                   value: option.value,
                 },
-                selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
+                selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], [option.value]),
               })) ?? []),
               {
                 id: "custom",
@@ -191,7 +183,7 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
                   key: "target_date",
                   value: option.value,
                 },
-                selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], option.value),
+                selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], [option.value]),
               })) ?? []),
               {
                 id: "custom",
diff --git a/web/components/issues/my-issues/my-issues-view-options.tsx b/web/components/issues/my-issues/my-issues-view-options.tsx
index 69cfa1909..f9314b775 100644
--- a/web/components/issues/my-issues/my-issues-view-options.tsx
+++ b/web/components/issues/my-issues/my-issues-view-options.tsx
@@ -7,7 +7,7 @@ import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
 // components
 import { MyIssuesSelectFilters } from "components/issues";
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import { FormatListBulletedOutlined } from "@mui/icons-material";
 import { CreditCard } from "lucide-react";
@@ -15,9 +15,9 @@ import { CreditCard } from "lucide-react";
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { TIssueViewOptions } from "types";
+import { TIssueLayouts } from "types";
 
-const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
+const issueViewOptions: { type: TIssueLayouts; Icon: any }[] = [
   {
     type: "list",
     Icon: FormatListBulletedOutlined,
@@ -32,15 +32,11 @@ export const MyIssuesViewOptions: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, globalViewId } = router.query;
 
-  const { displayFilters, setDisplayFilters, filters, setFilters } = useMyIssuesFilters(
-    workspaceSlug?.toString()
-  );
+  const { displayFilters, setDisplayFilters, filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString());
 
   const workspaceViewPathName = ["workspace-views/all-issues"];
 
-  const isWorkspaceViewPath = workspaceViewPathName.some((pathname) =>
-    router.pathname.includes(pathname)
-  );
+  const isWorkspaceViewPath = workspaceViewPathName.some((pathname) => router.pathname.includes(pathname));
 
   const showFilters = isWorkspaceViewPath || globalViewId;
 
@@ -50,9 +46,7 @@ export const MyIssuesViewOptions: React.FC = () => {
         {issueViewOptions.map((option) => (
           <Tooltip
             key={option.type}
-            tooltipContent={
-              <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>
-            }
+            tooltipContent={<span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} View</span>}
             position="bottom"
           >
             <button
@@ -64,8 +58,7 @@ export const MyIssuesViewOptions: React.FC = () => {
               }`}
               onClick={() => {
                 setDisplayFilters({ layout: option.type });
-                if (option.type === "spreadsheet")
-                  router.push(`/${workspaceSlug}/workspace-views/all-issues`);
+                if (option.type === "spreadsheet") router.push(`/${workspaceSlug}/workspace-views/all-issues`);
                 else router.push(`/${workspaceSlug}/workspace-views`);
               }}
             >
@@ -96,9 +89,7 @@ export const MyIssuesViewOptions: React.FC = () => {
 
               if (valueExists)
                 setFilters({
-                  [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                    (val) => val !== option.value
-                  ),
+                  [option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value),
                 });
               else
                 setFilters({
diff --git a/web/components/issues/my-issues/my-issues-view.tsx b/web/components/issues/my-issues/my-issues-view.tsx
index ced16b321..d968e2fcc 100644
--- a/web/components/issues/my-issues/my-issues-view.tsx
+++ b/web/components/issues/my-issues/my-issues-view.tsx
@@ -1,217 +1,190 @@
-import { useCallback, useState } from "react";
-
+import { useState } from "react";
 import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DropResult } from "react-beautiful-dnd";
+import useSWR from "swr";
 // services
-import issuesService from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // hooks
 import useMyIssues from "hooks/my-issues/use-my-issues";
 import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
 import useUserAuth from "hooks/use-user-auth";
 // components
-import { AllViews, FiltersList } from "components/core";
+import { FiltersList } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
-// helpers
-import { orderArrayBy } from "helpers/array.helper";
 // types
-import { IIssue, IIssueFilterOptions, TIssuePriorities } from "types";
+import { IIssue, IIssueFilterOptions } from "types";
 // fetch-keys
-import { USER_ISSUES, WORKSPACE_LABELS } from "constants/fetch-keys";
-import { PlusIcon } from "@heroicons/react/24/outline";
+import { WORKSPACE_LABELS } from "constants/fetch-keys";
 
 type Props = {
   openIssuesListModal?: () => void;
   disableUserActions?: false;
 };
 
-export const MyIssuesView: React.FC<Props> = ({
-  openIssuesListModal,
-  disableUserActions = false,
-}) => {
+const issueLabelService = new IssueLabelService();
+
+export const MyIssuesView: React.FC<Props> = () => {
   // create issue modal
   const [createIssueModal, setCreateIssueModal] = useState(false);
-  const [preloadedData, setPreloadedData] = useState<
-    (Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
-  >(undefined);
+  const [preloadedData] = 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);
+  const [issueToEdit] = useState<(IIssue & { actionType: "edit" | "delete" }) | undefined>(undefined);
 
   // delete issue modal
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
-  const [issueToDelete, setIssueToDelete] = useState<IIssue | null>(null);
+  const [issueToDelete] = useState<IIssue | null>(null);
 
   // trash box
-  const [trashBox, setTrashBox] = useState(false);
+  // const [trashBox, setTrashBox] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const { user } = useUserAuth();
 
-  const { groupedIssues, mutateMyIssues, isEmpty, params } = useMyIssues(workspaceSlug?.toString());
-  const { filters, setFilters, displayFilters, properties } = useMyIssuesFilters(
-    workspaceSlug?.toString()
-  );
+  const { mutateMyIssues } = useMyIssues(workspaceSlug?.toString());
+  const { filters, setFilters } = useMyIssuesFilters(workspaceSlug?.toString());
 
   const { data: labels } = useSWR(
+    workspaceSlug && (filters?.labels ?? []).length > 0 ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
     workspaceSlug && (filters?.labels ?? []).length > 0
-      ? WORKSPACE_LABELS(workspaceSlug.toString())
-      : null,
-    workspaceSlug && (filters?.labels ?? []).length > 0
-      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
+      ? () => issueLabelService.getWorkspaceIssueLabels(workspaceSlug.toString())
       : null
   );
 
-  const handleDeleteIssue = useCallback(
-    (issue: IIssue) => {
-      setDeleteIssueModal(true);
-      setIssueToDelete(issue);
-    },
-    [setDeleteIssueModal, setIssueToDelete]
-  );
+  // const handleDeleteIssue = useCallback(
+  //   (issue: IIssue) => {
+  //     setDeleteIssueModal(true);
+  //     setIssueToDelete(issue);
+  //   },
+  //   [setDeleteIssueModal, setIssueToDelete]
+  // );
 
-  const handleOnDragEnd = useCallback(
-    async (result: DropResult) => {
-      setTrashBox(false);
+  // const handleOnDragEnd = useCallback(
+  //   async (result: DropResult) => {
+  //     setTrashBox(false);
 
-      if (
-        !result.destination ||
-        !workspaceSlug ||
-        !groupedIssues ||
-        displayFilters?.group_by !== "priority"
-      )
-        return;
+  //     if (!result.destination || !workspaceSlug || !groupedIssues || displayFilters?.group_by !== "priority") return;
 
-      const { source, destination } = result;
+  //     const { source, destination } = result;
 
-      if (source.droppableId === destination.droppableId) return;
+  //     if (source.droppableId === destination.droppableId) return;
 
-      const draggedItem = groupedIssues[source.droppableId][source.index];
+  //     const draggedItem = groupedIssues[source.droppableId][source.index];
 
-      if (!draggedItem) return;
+  //     if (!draggedItem) return;
 
-      if (destination.droppableId === "trashBox") handleDeleteIssue(draggedItem);
-      else {
-        const sourceGroup = source.droppableId;
-        const destinationGroup = destination.droppableId;
+  //     if (destination.droppableId === "trashBox") handleDeleteIssue(draggedItem);
+  //     else {
+  //       const sourceGroup = source.droppableId;
+  //       const destinationGroup = destination.droppableId;
 
-        draggedItem[displayFilters.group_by] = destinationGroup as TIssuePriorities;
+  //       draggedItem[displayFilters.group_by] = destinationGroup as TIssuePriorities;
 
-        mutate<{
-          [key: string]: IIssue[];
-        }>(
-          USER_ISSUES(workspaceSlug.toString(), params),
-          (prevData) => {
-            if (!prevData) return prevData;
+  //       mutate<{
+  //         [key: string]: IIssue[];
+  //       }>(
+  //         USER_ISSUES(workspaceSlug.toString(), params),
+  //         (prevData) => {
+  //           if (!prevData) return prevData;
 
-            const sourceGroupArray = [...groupedIssues[sourceGroup]];
-            const destinationGroupArray = [...groupedIssues[destinationGroup]];
+  //           const sourceGroupArray = [...groupedIssues[sourceGroup]];
+  //           const destinationGroupArray = [...groupedIssues[destinationGroup]];
 
-            sourceGroupArray.splice(source.index, 1);
-            destinationGroupArray.splice(destination.index, 0, draggedItem);
+  //           sourceGroupArray.splice(source.index, 1);
+  //           destinationGroupArray.splice(destination.index, 0, draggedItem);
 
-            return {
-              ...prevData,
-              [sourceGroup]: orderArrayBy(
-                sourceGroupArray,
-                displayFilters.order_by ?? "-created_at"
-              ),
-              [destinationGroup]: orderArrayBy(
-                destinationGroupArray,
-                displayFilters.order_by ?? "-created_at"
-              ),
-            };
-          },
-          false
-        );
+  //           return {
+  //             ...prevData,
+  //             [sourceGroup]: orderArrayBy(sourceGroupArray, displayFilters.order_by ?? "-created_at"),
+  //             [destinationGroup]: orderArrayBy(destinationGroupArray, displayFilters.order_by ?? "-created_at"),
+  //           };
+  //         },
+  //         false
+  //       );
 
-        // patch request
-        issuesService
-          .patchIssue(
-            workspaceSlug as string,
-            draggedItem.project,
-            draggedItem.id,
-            {
-              priority: draggedItem.priority,
-            },
-            user
-          )
-          .catch(() => mutate(USER_ISSUES(workspaceSlug.toString(), params)));
-      }
-    },
-    [displayFilters, groupedIssues, handleDeleteIssue, params, user, workspaceSlug]
-  );
+  //       // patch request
+  //       issuesService
+  //         .patchIssue(
+  //           workspaceSlug as string,
+  //           draggedItem.project,
+  //           draggedItem.id,
+  //           {
+  //             priority: draggedItem.priority,
+  //           },
+  //           user
+  //         )
+  //         .catch(() => mutate(USER_ISSUES(workspaceSlug.toString(), params)));
+  //     }
+  //   },
+  //   [displayFilters, groupedIssues, handleDeleteIssue, params, user, workspaceSlug]
+  // );
 
-  const addIssueToGroup = useCallback(
-    (groupTitle: string) => {
-      setCreateIssueModal(true);
+  // const addIssueToGroup = useCallback(
+  //   (groupTitle: string) => {
+  //     setCreateIssueModal(true);
 
-      let preloadedValue: string | string[] = groupTitle;
+  //     let preloadedValue: string | string[] = groupTitle;
 
-      if (displayFilters?.group_by === "labels") {
-        if (groupTitle === "None") preloadedValue = [];
-        else preloadedValue = [groupTitle];
-      }
+  //     if (displayFilters?.group_by === "labels") {
+  //       if (groupTitle === "None") preloadedValue = [];
+  //       else preloadedValue = [groupTitle];
+  //     }
 
-      if (displayFilters?.group_by)
-        setPreloadedData({
-          [displayFilters?.group_by]: preloadedValue,
-          actionType: "createIssue",
-        });
-      else setPreloadedData({ actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData, displayFilters?.group_by]
-  );
+  //     if (displayFilters?.group_by)
+  //       setPreloadedData({
+  //         [displayFilters?.group_by]: preloadedValue,
+  //         actionType: "createIssue",
+  //       });
+  //     else setPreloadedData({ actionType: "createIssue" });
+  //   },
+  //   [setCreateIssueModal, setPreloadedData, displayFilters?.group_by]
+  // );
 
-  const addIssueToDate = useCallback(
-    (date: string) => {
-      setCreateIssueModal(true);
-      setPreloadedData({
-        target_date: date,
-        actionType: "createIssue",
-      });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
+  // const addIssueToDate = useCallback(
+  //   (date: string) => {
+  //     setCreateIssueModal(true);
+  //     setPreloadedData({
+  //       target_date: date,
+  //       actionType: "createIssue",
+  //     });
+  //   },
+  //   [setCreateIssueModal, setPreloadedData]
+  // );
 
-  const makeIssueCopy = useCallback(
-    (issue: IIssue) => {
-      setCreateIssueModal(true);
+  // const makeIssueCopy = useCallback(
+  //   (issue: IIssue) => {
+  //     setCreateIssueModal(true);
 
-      setPreloadedData({ ...issue, name: `${issue.name} (Copy)`, actionType: "createIssue" });
-    },
-    [setCreateIssueModal, setPreloadedData]
-  );
+  //     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 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 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 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 filtersToDisplay = { ...filters, assignees: null, created_by: null, subscriber: null };
 
@@ -219,17 +192,13 @@ export const MyIssuesView: React.FC<Props> = ({
     (key) => filtersToDisplay[key as keyof IIssueFilterOptions] === null
   );
   const areFiltersApplied =
-    Object.keys(filtersToDisplay).length > 0 &&
-    nullFilters.length !== Object.keys(filtersToDisplay).length;
+    Object.keys(filtersToDisplay).length > 0 && nullFilters.length !== Object.keys(filtersToDisplay).length;
 
-  const isSubscribedIssuesRoute = router.pathname.includes("subscribed");
-  const isMySubscribedIssues =
-    (filters.subscriber &&
-      filters.subscriber.length > 0 &&
-      router.pathname.includes("my-issues")) ??
-    false;
+  // const isSubscribedIssuesRoute = router.pathname.includes("subscribed");
+  // const isMySubscribedIssues =
+  //   (filters.subscriber && filters.subscriber.length > 0 && router.pathname.includes("my-issues")) ?? false;
 
-  const disableAddIssueOption = isSubscribedIssuesRoute || isMySubscribedIssues;
+  // const disableAddIssueOption = isSubscribedIssuesRoute || isMySubscribedIssues;
 
   return (
     <>
@@ -283,7 +252,7 @@ export const MyIssuesView: React.FC<Props> = ({
           {<div className="mt-3 border-t border-custom-border-200" />}
         </>
       )}
-      <AllViews
+      {/* <AllViews
         addIssueToDate={addIssueToDate}
         addIssueToGroup={addIssueToGroup}
         disableUserActions={disableUserActions}
@@ -323,7 +292,7 @@ export const MyIssuesView: React.FC<Props> = ({
           params,
           properties,
         }}
-      />
+      /> */}
     </>
   );
 };
diff --git a/web/components/issues/parent-issues-list-modal.tsx b/web/components/issues/parent-issues-list-modal.tsx
index a29fa6521..fcc8b8cc1 100644
--- a/web/components/issues/parent-issues-list-modal.tsx
+++ b/web/components/issues/parent-issues-list-modal.tsx
@@ -5,13 +5,13 @@ import { useRouter } from "next/router";
 // headless ui
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // hooks
 import useDebounce from "hooks/use-debounce";
 // components
 import { LayerDiagonalIcon } from "components/icons";
 // ui
-import { Loader, ToggleSwitch, Tooltip } from "components/ui";
+import { Loader, ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
 import { LaunchOutlined } from "@mui/icons-material";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
@@ -27,6 +27,9 @@ type Props = {
   issueId?: string;
 };
 
+// services
+const projectService = new ProjectService();
+
 export const ParentIssuesListModal: React.FC<Props> = ({
   isOpen,
   handleClose: onClose,
@@ -69,12 +72,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
 
   return (
     <>
-      <Transition.Root
-        show={isOpen}
-        as={React.Fragment}
-        afterLeave={() => setSearchTerm("")}
-        appear
-      >
+      <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
         <Dialog as="div" className="relative z-20" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
@@ -154,21 +152,15 @@ export const ParentIssuesListModal: React.FC<Props> = ({
                       </h5>
                     )}
 
-                    {!isSearching &&
-                      issues.length === 0 &&
-                      searchTerm !== "" &&
-                      debouncedSearchTerm !== "" && (
-                        <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
-                          <LayerDiagonalIcon height="52" width="52" />
-                          <h3 className="text-custom-text-200">
-                            No issues found. Create a new issue with{" "}
-                            <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">
-                              C
-                            </pre>
-                            .
-                          </h3>
-                        </div>
-                      )}
+                    {!isSearching && issues.length === 0 && searchTerm !== "" && debouncedSearchTerm !== "" && (
+                      <div className="flex flex-col items-center justify-center gap-4 px-3 py-8 text-center">
+                        <LayerDiagonalIcon height="52" width="52" />
+                        <h3 className="text-custom-text-200">
+                          No issues found. Create a new issue with{" "}
+                          <pre className="inline rounded bg-custom-background-80 px-2 py-1 text-sm">C</pre>.
+                        </h3>
+                      </div>
+                    )}
 
                     {isSearching ? (
                       <Loader className="space-y-3 p-3">
diff --git a/web/components/issues/peek-overview/full-screen-peek-view.tsx b/web/components/issues/peek-overview/full-screen-peek-view.tsx
index 9c04e0b6a..47d0d1e7d 100644
--- a/web/components/issues/peek-overview/full-screen-peek-view.tsx
+++ b/web/components/issues/peek-overview/full-screen-peek-view.tsx
@@ -7,7 +7,7 @@ import {
   TPeekOverviewModes,
 } from "components/issues";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { IIssue } from "types";
 
@@ -59,11 +59,7 @@ export const FullScreenPeekView: React.FC<Props> = ({
           <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
           {/* issue activity/comments */}
           <div className="w-full pb-5">
-            <PeekOverviewIssueActivity
-              workspaceSlug={workspaceSlug}
-              issue={issue}
-              readOnly={readOnly}
-            />
+            <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} issue={issue} readOnly={readOnly} />
           </div>
         </div>
       ) : (
diff --git a/web/components/issues/peek-overview/issue-activity.tsx b/web/components/issues/peek-overview/issue-activity.tsx
index 68e608dba..dc1d044af 100644
--- a/web/components/issues/peek-overview/issue-activity.tsx
+++ b/web/components/issues/peek-overview/issue-activity.tsx
@@ -1,7 +1,6 @@
 import useSWR, { mutate } from "swr";
-
 // services
-import issuesService from "services/issues.service";
+import { IssueCommentService, IssueService } from "services/issue";
 // hooks
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
@@ -19,7 +18,12 @@ type Props = {
   readOnly: boolean;
 };
 
-export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issue, readOnly }) => {
+const issueCommentService = new IssueCommentService();
+const issueService = new IssueService();
+
+export const PeekOverviewIssueActivity: React.FC<Props> = (props) => {
+  const { workspaceSlug, issue } = props;
+  // toast
   const { setToastAlert } = useToast();
 
   const { user } = useUser();
@@ -28,14 +32,14 @@ export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issu
   const { data: issueActivity, mutate: mutateIssueActivity } = useSWR(
     workspaceSlug && issue ? PROJECT_ISSUES_ACTIVITY(issue.id) : null,
     workspaceSlug && issue
-      ? () => issuesService.getIssueActivities(workspaceSlug.toString(), issue?.project, issue?.id)
+      ? () => issueService.getIssueActivities(workspaceSlug.toString(), issue?.project, issue?.id)
       : null
   );
 
   const handleCommentUpdate = async (commentId: string, data: Partial<IIssueComment>) => {
     if (!workspaceSlug || !issue) return;
 
-    await issuesService
+    await issueCommentService
       .patchIssueComment(workspaceSlug as string, issue.project, issue.id, commentId, data, user)
       .then(() => mutateIssueActivity());
   };
@@ -45,7 +49,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issu
 
     mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
 
-    await issuesService
+    await issueCommentService
       .deleteIssueComment(workspaceSlug as string, issue.project, issue.id, commentId, user)
       .then(() => mutateIssueActivity());
   };
@@ -53,7 +57,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issu
   const handleAddComment = async (formData: IIssueComment) => {
     if (!workspaceSlug || !issue) return;
 
-    await issuesService
+    await issueCommentService
       .createIssueComment(workspaceSlug.toString(), issue.project, issue.id, formData, user)
       .then(() => {
         mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
@@ -78,10 +82,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = ({ workspaceSlug, issu
           showAccessSpecifier={projectDetails && projectDetails.is_deployed}
         />
         <div className="mt-4">
-          <AddComment
-            onSubmit={handleAddComment}
-            showAccessSpecifier={projectDetails && projectDetails.is_deployed}
-          />
+          <AddComment onSubmit={handleAddComment} showAccessSpecifier={projectDetails && projectDetails.is_deployed} />
         </div>
       </div>
     </div>
diff --git a/web/components/issues/peek-overview/issue-properties.tsx b/web/components/issues/peek-overview/issue-properties.tsx
index d001634fc..7a4fec277 100644
--- a/web/components/issues/peek-overview/issue-properties.tsx
+++ b/web/components/issues/peek-overview/issue-properties.tsx
@@ -1,15 +1,11 @@
-// mobx
-import { observer } from "mobx-react-lite";
-// headless ui
-import { Disclosure } from "@headlessui/react";
+import { FC } from "react";
+// components
 import { StateGroupIcon } from "components/icons";
 // hooks
 import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
 // components
 import {
   SidebarAssigneeSelect,
-  SidebarEstimateSelect,
   SidebarPrioritySelect,
   SidebarStateSelect,
   TPeekOverviewModes,
@@ -19,7 +15,7 @@ import { CustomDatePicker, Icon } from "components/ui";
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import { IIssue, TIssuePriorities } from "types";
+import { IIssue } from "types";
 
 type Props = {
   handleDeleteIssue: () => void;
@@ -30,14 +26,9 @@ type Props = {
   workspaceSlug: string;
 };
 
-export const PeekOverviewIssueProperties: React.FC<Props> = ({
-  handleDeleteIssue,
-  handleUpdateIssue,
-  issue,
-  mode,
-  readOnly,
-  workspaceSlug,
-}) => {
+export const PeekOverviewIssueProperties: FC<Props> = (props) => {
+  const { handleDeleteIssue, handleUpdateIssue, issue, mode, readOnly } = props;
+  // toast
   const { setToastAlert } = useToast();
 
   const startDate = issue.start_date;
@@ -66,10 +57,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
       {mode === "full" && (
         <div className="flex justify-between gap-2 pb-3">
           <h6 className="flex items-center gap-2 font-medium">
-            <StateGroupIcon
-              stateGroup={issue.state_detail.group}
-              color={issue.state_detail.color}
-            />
+            <StateGroupIcon stateGroup={issue.state_detail.group} color={issue.state_detail.color} />
             {issue.project_detail.identifier}-{issue.sequence_id}
           </h6>
           <div className="flex items-center gap-2">
diff --git a/web/components/issues/peek-overview/layout.tsx b/web/components/issues/peek-overview/layout.tsx
index 57bcb904c..cfb8f0683 100644
--- a/web/components/issues/peek-overview/layout.tsx
+++ b/web/components/issues/peek-overview/layout.tsx
@@ -18,7 +18,7 @@ import { IIssue } from "types";
 import { PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
 
 type Props = {
-  handleMutation: () => void;
+  handleMutation?: () => void;
   projectId: string;
   readOnly: boolean;
   workspaceSlug: string;
@@ -26,110 +26,121 @@ type Props = {
 
 export type TPeekOverviewModes = "side" | "modal" | "full";
 
-export const IssuePeekOverview: React.FC<Props> = observer(
-  ({ handleMutation, projectId, readOnly, workspaceSlug }) => {
-    const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
-    const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
-    const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
-    const [deleteIssueModal, setDeleteIssueModal] = useState(false);
+export const IssuePeekOverview: React.FC<Props> = observer(({ handleMutation, projectId, readOnly, workspaceSlug }) => {
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
+  const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
+  const [peekOverviewMode, setPeekOverviewMode] = useState<TPeekOverviewModes>("side");
+  const [deleteIssueModal, setDeleteIssueModal] = useState(false);
 
-    const router = useRouter();
-    const { peekIssue } = router.query;
+  const router = useRouter();
+  const { peekIssue } = router.query;
 
-    const { issues: issuesStore } = useMobxStore();
-    const { deleteIssue, getIssueById, issues, updateIssue } = issuesStore;
+  const { issueDetail: issueDetailStore } = useMobxStore();
+  const { deleteIssue, fetchIssueDetails, issues, updateIssue } = issueDetailStore;
 
-    const issue = issues[peekIssue?.toString() ?? ""];
+  const issue = issues[peekIssue?.toString() ?? ""];
 
-    const { user } = useUser();
+  const { user } = useUser();
 
-    const handleClose = () => {
-      const { query } = router;
-      delete query.peekIssue;
+  const handleClose = () => {
+    const { query } = router;
+    delete query.peekIssue;
 
-      router.push({
-        pathname: router.pathname,
-        query: { ...query },
-      });
-    };
+    router.push({
+      pathname: router.pathname,
+      query: { ...query },
+    });
+  };
 
-    const handleUpdateIssue = async (formData: Partial<IIssue>) => {
-      if (!issue || !user) return;
+  const handleUpdateIssue = async (formData: Partial<IIssue>) => {
+    if (!issue || !user) return;
 
-      await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
-      mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
-      handleMutation();
-    };
+    await updateIssue(workspaceSlug, projectId, issue.id, formData, user);
+    mutate(PROJECT_ISSUES_ACTIVITY(issue.id));
+    if (handleMutation) handleMutation();
+  };
 
-    const handleDeleteIssue = async () => {
-      if (!issue || !user) return;
+  const handleDeleteIssue = async () => {
+    if (!issue || !user) return;
 
-      await deleteIssue(workspaceSlug, projectId, issue.id, user);
-      handleMutation();
+    await deleteIssue(workspaceSlug, projectId, issue.id, user);
+    if (handleMutation) handleMutation();
 
-      handleClose();
-    };
+    handleClose();
+  };
 
-    useEffect(() => {
-      if (!peekIssue) return;
+  useEffect(() => {
+    if (!peekIssue) return;
 
-      getIssueById(workspaceSlug, projectId, peekIssue.toString());
-    }, [getIssueById, peekIssue, projectId, workspaceSlug]);
+    fetchIssueDetails(workspaceSlug, projectId, peekIssue.toString());
+  }, [fetchIssueDetails, peekIssue, projectId, workspaceSlug]);
 
-    useEffect(() => {
-      if (peekIssue) {
-        if (peekOverviewMode === "side") {
-          setIsSidePeekOpen(true);
-          setIsModalPeekOpen(false);
-        } else {
-          setIsModalPeekOpen(true);
-          setIsSidePeekOpen(false);
-        }
-      } else {
-        setIsSidePeekOpen(false);
+  useEffect(() => {
+    if (peekIssue) {
+      if (peekOverviewMode === "side") {
+        setIsSidePeekOpen(true);
         setIsModalPeekOpen(false);
+      } else {
+        setIsModalPeekOpen(true);
+        setIsSidePeekOpen(false);
       }
-    }, [peekIssue, peekOverviewMode]);
+    } else {
+      setIsSidePeekOpen(false);
+      setIsModalPeekOpen(false);
+    }
+  }, [peekIssue, peekOverviewMode]);
 
-    return (
-      <>
-        <DeleteIssueModal
-          isOpen={deleteIssueModal}
-          handleClose={() => setDeleteIssueModal(false)}
-          data={issue ? { ...issue } : null}
-          onSubmit={handleDeleteIssue}
-          user={user}
-        />
-        <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
-          <Dialog as="div" className="relative z-20" onClose={handleClose}>
-            <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
-              <Transition.Child
-                as={React.Fragment}
-                enter="transition-transform duration-300"
-                enterFrom="translate-x-full"
-                enterTo="translate-x-0"
-                leave="transition-transform duration-200"
-                leaveFrom="translate-x-0"
-                leaveTo="translate-x-full"
-              >
-                <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
-                  <SidePeekView
-                    handleClose={handleClose}
-                    handleDeleteIssue={() => setDeleteIssueModal(true)}
-                    handleUpdateIssue={handleUpdateIssue}
-                    issue={issue}
-                    mode={peekOverviewMode}
-                    readOnly={readOnly}
-                    setMode={(mode) => setPeekOverviewMode(mode)}
-                    workspaceSlug={workspaceSlug}
-                  />
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </Dialog>
-        </Transition.Root>
-        <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
-          <Dialog as="div" className="relative z-20" onClose={handleClose}>
+  return (
+    <>
+      <DeleteIssueModal
+        isOpen={deleteIssueModal}
+        handleClose={() => setDeleteIssueModal(false)}
+        data={issue ? { ...issue } : null}
+        onSubmit={handleDeleteIssue}
+        user={user}
+      />
+      <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
+        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+            <Transition.Child
+              as={React.Fragment}
+              enter="transition-transform duration-300"
+              enterFrom="translate-x-full"
+              enterTo="translate-x-0"
+              leave="transition-transform duration-200"
+              leaveFrom="translate-x-0"
+              leaveTo="translate-x-full"
+            >
+              <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
+                <SidePeekView
+                  handleClose={handleClose}
+                  handleDeleteIssue={() => setDeleteIssueModal(true)}
+                  handleUpdateIssue={handleUpdateIssue}
+                  issue={issue}
+                  mode={peekOverviewMode}
+                  readOnly={readOnly}
+                  setMode={(mode) => setPeekOverviewMode(mode)}
+                  workspaceSlug={workspaceSlug}
+                />
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </Dialog>
+      </Transition.Root>
+      <Transition.Root appear show={isModalPeekOpen} 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 h-full w-full overflow-y-auto">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -139,55 +150,42 @@ export const IssuePeekOverview: React.FC<Props> = observer(
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+              <Dialog.Panel>
+                <div
+                  className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
+                    peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
+                  }`}
+                >
+                  {peekOverviewMode === "modal" && (
+                    <SidePeekView
+                      handleClose={handleClose}
+                      handleDeleteIssue={() => setDeleteIssueModal(true)}
+                      handleUpdateIssue={handleUpdateIssue}
+                      issue={issue}
+                      mode={peekOverviewMode}
+                      readOnly={readOnly}
+                      setMode={(mode) => setPeekOverviewMode(mode)}
+                      workspaceSlug={workspaceSlug}
+                    />
+                  )}
+                  {peekOverviewMode === "full" && (
+                    <FullScreenPeekView
+                      handleClose={handleClose}
+                      handleDeleteIssue={() => setDeleteIssueModal(true)}
+                      handleUpdateIssue={handleUpdateIssue}
+                      issue={issue}
+                      mode={peekOverviewMode}
+                      readOnly={readOnly}
+                      setMode={(mode) => setPeekOverviewMode(mode)}
+                      workspaceSlug={workspaceSlug}
+                    />
+                  )}
+                </div>
+              </Dialog.Panel>
             </Transition.Child>
-            <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
-              <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"
-              >
-                <Dialog.Panel>
-                  <div
-                    className={`fixed z-20 bg-custom-background-100 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg shadow-custom-shadow-xl transition-all duration-300 ${
-                      peekOverviewMode === "modal" ? "h-[70%] w-3/5" : "h-[95%] w-[95%]"
-                    }`}
-                  >
-                    {peekOverviewMode === "modal" && (
-                      <SidePeekView
-                        handleClose={handleClose}
-                        handleDeleteIssue={() => setDeleteIssueModal(true)}
-                        handleUpdateIssue={handleUpdateIssue}
-                        issue={issue}
-                        mode={peekOverviewMode}
-                        readOnly={readOnly}
-                        setMode={(mode) => setPeekOverviewMode(mode)}
-                        workspaceSlug={workspaceSlug}
-                      />
-                    )}
-                    {peekOverviewMode === "full" && (
-                      <FullScreenPeekView
-                        handleClose={handleClose}
-                        handleDeleteIssue={() => setDeleteIssueModal(true)}
-                        handleUpdateIssue={handleUpdateIssue}
-                        issue={issue}
-                        mode={peekOverviewMode}
-                        readOnly={readOnly}
-                        setMode={(mode) => setPeekOverviewMode(mode)}
-                        workspaceSlug={workspaceSlug}
-                      />
-                    )}
-                  </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </Dialog>
-        </Transition.Root>
-      </>
-    );
-  }
-);
+          </div>
+        </Dialog>
+      </Transition.Root>
+    </>
+  );
+});
diff --git a/web/components/issues/peek-overview/side-peek-view.tsx b/web/components/issues/peek-overview/side-peek-view.tsx
index 1bdeed479..cb3e8316b 100644
--- a/web/components/issues/peek-overview/side-peek-view.tsx
+++ b/web/components/issues/peek-overview/side-peek-view.tsx
@@ -7,7 +7,7 @@ import {
   TPeekOverviewModes,
 } from "components/issues";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { IIssue } from "types";
 
@@ -69,13 +69,7 @@ export const SidePeekView: React.FC<Props> = ({
         <div className="h-[1] w-full border-t border-custom-border-200 my-5" />
         {/* issue activity/comments */}
         <div className="w-full pb-5">
-          {issue && (
-            <PeekOverviewIssueActivity
-              workspaceSlug={workspaceSlug}
-              issue={issue}
-              readOnly={readOnly}
-            />
-          )}
+          {issue && <PeekOverviewIssueActivity workspaceSlug={workspaceSlug} issue={issue} readOnly={readOnly} />}
         </div>
       </div>
     ) : (
diff --git a/web/components/issues/select/assignee.tsx b/web/components/issues/select/assignee.tsx
index 30c5cfc8d..7deb7603f 100644
--- a/web/components/issues/select/assignee.tsx
+++ b/web/components/issues/select/assignee.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectServices from "services/project.service";
+import { ProjectService } from "services/project";
 // ui
 import { AssigneesList, Avatar, CustomSearchSelect, Icon } from "components/ui";
 // fetch-keys
@@ -15,6 +15,8 @@ export type Props = {
   onChange: (value: string[]) => void;
 };
 
+const projectService = new ProjectService();
+
 export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], onChange }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -22,7 +24,7 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
   const { data: members } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
       : null
   );
 
diff --git a/web/components/issues/select/label.tsx b/web/components/issues/select/label.tsx
index cf960b3a0..3c9713469 100644
--- a/web/components/issues/select/label.tsx
+++ b/web/components/issues/select/label.tsx
@@ -1,23 +1,13 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
-// headless ui
 import { Combobox, Transition } from "@headlessui/react";
 // services
-import issuesServices from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // ui
 import { IssueLabelsList } from "components/ui";
 // icons
-import {
-  CheckIcon,
-  MagnifyingGlassIcon,
-  PlusIcon,
-  RectangleGroupIcon,
-  TagIcon,
-} from "@heroicons/react/24/outline";
+import { CheckIcon, MagnifyingGlassIcon, PlusIcon, RectangleGroupIcon, TagIcon } from "@heroicons/react/24/outline";
 // types
 import type { IIssueLabels } from "types";
 // fetch-keys
@@ -30,6 +20,8 @@ type Props = {
   projectId: string;
 };
 
+const issueLabelService = new IssueLabelService();
+
 export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange, projectId }) => {
   // states
   const [query, setQuery] = useState("");
@@ -40,23 +32,15 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
   const { data: issueLabels } = useSWR<IIssueLabels[]>(
     projectId ? PROJECT_ISSUE_LABELS(projectId) : null,
     workspaceSlug && projectId
-      ? () => issuesServices.getIssueLabels(workspaceSlug as string, projectId)
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId)
       : null
   );
 
   const filteredOptions =
-    query === ""
-      ? issueLabels
-      : issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase()));
+    query === "" ? issueLabels : issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase()));
 
   return (
-    <Combobox
-      as="div"
-      value={value}
-      onChange={(val) => onChange(val)}
-      className="relative flex-shrink-0"
-      multiple
-    >
+    <Combobox as="div" value={value} onChange={(val) => onChange(val)} className="relative flex-shrink-0" multiple>
       {({ open }: any) => (
         <>
           <Combobox.Button className="flex items-center gap-2 cursor-pointer text-xs text-custom-text-200">
@@ -129,11 +113,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                     <span>{label.name}</span>
                                   </div>
                                   <div className="flex items-center justify-center rounded p-1">
-                                    <CheckIcon
-                                      className={`h-3 w-3 ${
-                                        selected ? "opacity-100" : "opacity-0"
-                                      }`}
-                                    />
+                                    <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                   </div>
                                 </div>
                               )}
@@ -168,11 +148,7 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
                                         <span>{child.name}</span>
                                       </div>
                                       <div className="flex items-center justify-center rounded p-1">
-                                        <CheckIcon
-                                          className={`h-3 w-3 ${
-                                            selected ? "opacity-100" : "opacity-0"
-                                          }`}
-                                        />
+                                        <CheckIcon className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`} />
                                       </div>
                                     </div>
                                   )}
diff --git a/web/components/issues/select/state.tsx b/web/components/issues/select/state.tsx
index 22a4e6532..b7424a52b 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/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,9 +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);
 
@@ -60,10 +61,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
           {selectedOption ? (
             <StateGroupIcon stateGroup={selectedOption.group} color={selectedOption.color} />
           ) : currentDefaultState ? (
-            <StateGroupIcon
-              stateGroup={currentDefaultState.group}
-              color={currentDefaultState.color}
-            />
+            <StateGroupIcon stateGroup={currentDefaultState.group} color={currentDefaultState.color} />
           ) : (
             <Squares2X2Icon className="h-3.5 w-3.5 text-custom-text-200" />
           )}
diff --git a/web/components/issues/sidebar-select/assignee.tsx b/web/components/issues/sidebar-select/assignee.tsx
index 8b9872368..05fe64243 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";
+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 a4ebe0108..3db9c7184 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/issues.service";
+import { IssueService } from "services/issue";
 // components
 import { ExistingIssuesListModal } from "components/core";
 // icons
@@ -23,12 +23,10 @@ type Props = {
   disabled?: boolean;
 };
 
-export const SidebarBlockedSelect: React.FC<Props> = ({
-  issueId,
-  submitChanges,
-  watch,
-  disabled = false,
-}) => {
+// services
+const issueService = new IssueService();
+
+export const SidebarBlockedSelect: React.FC<Props> = ({ issueId, submitChanges, watch, disabled = false }) => {
   const [isBlockedModalOpen, setIsBlockedModalOpen] = useState(false);
 
   const { user } = useUser();
@@ -41,8 +39,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
     setIsBlockedModalOpen(false);
   };
 
-  const blockedByIssue =
-    watch("related_issues")?.filter((i) => i.relation_type === "blocked_by") || [];
+  const blockedByIssue = watch("related_issues")?.filter((i) => i.relation_type === "blocked_by") || [];
 
   const onSubmit = async (data: ISearchIssueResponse[]) => {
     if (data.length === 0) {
@@ -70,7 +67,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
 
     if (!user) return;
 
-    issuesService
+    issueService
       .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
         related_list: [
           ...selectedIssues.map((issue) => ({
@@ -125,9 +122,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
                       type="button"
                       className="opacity-0 duration-300 group-hover:opacity-100"
                       onClick={() => {
-                        const updatedRelations = watch("related_issues")?.filter(
-                          (i) => i.id !== relation.id
-                        );
+                        const updatedRelations = watch("related_issues")?.filter((i) => i.id !== relation.id);
 
                         submitChanges({
                           related_issues: updatedRelations,
@@ -135,7 +130,7 @@ export const SidebarBlockedSelect: React.FC<Props> = ({
 
                         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 8059e3760..8d174e448 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/issues.service";
+import { IssueService } from "services/issue";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { BlockerIcon } from "components/icons";
@@ -24,12 +24,10 @@ type Props = {
   disabled?: boolean;
 };
 
-export const SidebarBlockerSelect: React.FC<Props> = ({
-  issueId,
-  submitChanges,
-  watch,
-  disabled = false,
-}) => {
+// services
+const issueService = new IssueService();
+
+export const SidebarBlockerSelect: React.FC<Props> = ({ issueId, submitChanges, watch, disabled = false }) => {
   const [isBlockerModalOpen, setIsBlockerModalOpen] = useState(false);
 
   const { user } = useUser();
@@ -42,8 +40,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
     setIsBlockerModalOpen(false);
   };
 
-  const blockerIssue =
-    watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || [];
+  const blockerIssue = watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || [];
 
   const onSubmit = async (data: ISearchIssueResponse[]) => {
     if (data.length === 0) {
@@ -71,7 +68,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
 
     if (!user) return;
 
-    issuesService
+    issueService
       .createIssueRelation(workspaceSlug as string, projectId as string, issueId as string, user, {
         related_list: [
           ...selectedIssues.map((issue) => ({
@@ -143,7 +140,7 @@ export const SidebarBlockerSelect: React.FC<Props> = ({
 
                         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 c5bc84861..47ad5aecc 100644
--- a/web/components/issues/sidebar-select/cycle.tsx
+++ b/web/components/issues/sidebar-select/cycle.tsx
@@ -5,10 +5,11 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import issuesService from "services/issues.service";
-import cyclesService from "services/cycles.service";
+import { IssueService } from "services/issue";
+import { CycleService } from "services/cycle.service";
 // ui
-import { Spinner, CustomSelect, Tooltip } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { Spinner, Tooltip } from "@plane/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
 // types
@@ -22,30 +23,25 @@ type Props = {
   disabled?: boolean;
 };
 
-export const SidebarCycleSelect: React.FC<Props> = ({
-  issueDetail,
-  handleCycleChange,
-  disabled = false,
-}) => {
+// 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;
 
   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));
@@ -63,21 +59,14 @@ export const SidebarCycleSelect: React.FC<Props> = ({
     <CustomSelect
       customButton={
         <div>
-          <Tooltip
-            position="left"
-            tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}
-          >
+          <Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle.cycle_detail.name : "No cycle"}`}>
             <button
               type="button"
               className={`bg-custom-background-80 text-xs rounded px-2.5 py-0.5 w-full flex ${
                 disabled ? "cursor-not-allowed" : ""
               }`}
             >
-              <span
-                className={`truncate ${
-                  issueCycle ? "text-custom-text-100" : "text-custom-text-200"
-                }`}
-              >
+              <span className={`truncate ${issueCycle ? "text-custom-text-100" : "text-custom-text-200"}`}>
                 {issueCycle ? issueCycle.cycle_detail.name : "No cycle"}
               </span>
             </button>
diff --git a/web/components/issues/sidebar-select/duplicate.tsx b/web/components/issues/sidebar-select/duplicate.tsx
index 0294d9475..976dae14b 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/issues.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/label.tsx b/web/components/issues/sidebar-select/label.tsx
index 3ac2f552e..99b4ceb15 100644
--- a/web/components/issues/sidebar-select/label.tsx
+++ b/web/components/issues/sidebar-select/label.tsx
@@ -1,21 +1,16 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
-// react-hook-form
 import { Controller, UseFormWatch, useForm } from "react-hook-form";
-// react-color
 import { TwitterPicker } from "react-color";
 // headless ui
 import { Listbox, Popover, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // hooks
 import useUser from "hooks/use-user";
 // ui
-import { Input, Spinner } from "components/ui";
+import { Input, Spinner } from "@plane/ui";
 // icons
 import { PlusIcon, RectangleGroupIcon, TagIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
@@ -37,6 +32,8 @@ const defaultValues: Partial<IIssueLabels> = {
   color: "#ff0000",
 };
 
+const issueLabelService = new IssueLabelService();
+
 export const SidebarLabelSelect: React.FC<Props> = ({
   issueDetails,
   issueControl,
@@ -51,12 +48,11 @@ export const SidebarLabelSelect: React.FC<Props> = ({
   const { workspaceSlug, projectId } = router.query;
 
   const {
-    register,
     handleSubmit,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     reset,
     watch,
-    control: labelControl,
+    control,
     setFocus,
   } = useForm<Partial<IIssueLabels>>({
     defaultValues,
@@ -67,14 +63,14 @@ export const SidebarLabelSelect: React.FC<Props> = ({
   const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
       : null
   );
 
   const handleNewLabel = async (formData: Partial<IIssueLabels>) => {
     if (!workspaceSlug || !projectId || isSubmitting) return;
 
-    await issuesService
+    await issueLabelService
       .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
       .then((res) => {
         reset(defaultValues);
@@ -165,9 +161,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                             {issueLabels ? (
                               issueLabels.length > 0 ? (
                                 issueLabels.map((label: IIssueLabels) => {
-                                  const children = issueLabels?.filter(
-                                    (l) => l.parent === label.id
-                                  );
+                                  const children = issueLabels?.filter((l) => l.parent === label.id);
 
                                   if (children.length === 0) {
                                     if (!label.parent)
@@ -175,9 +169,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                                         <Listbox.Option
                                           key={label.id}
                                           className={({ active, selected }) =>
-                                            `${
-                                              active || selected ? "bg-custom-background-90" : ""
-                                            } ${
+                                            `${active || selected ? "bg-custom-background-90" : ""} ${
                                               selected ? "" : "text-custom-text-200"
                                             } flex cursor-pointer select-none items-center gap-2 truncate p-2`
                                           }
@@ -186,10 +178,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                                           <span
                                             className="h-2 w-2 flex-shrink-0 rounded-full"
                                             style={{
-                                              backgroundColor:
-                                                label.color && label.color !== ""
-                                                  ? label.color
-                                                  : "#000",
+                                              backgroundColor: label.color && label.color !== "" ? label.color : "#000",
                                             }}
                                           />
                                           {label.name}
@@ -207,11 +196,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                                             <Listbox.Option
                                               key={child.id}
                                               className={({ active, selected }) =>
-                                                `${
-                                                  active || selected
-                                                    ? "bg-custom-background-100"
-                                                    : ""
-                                                } ${
+                                                `${active || selected ? "bg-custom-background-100" : ""} ${
                                                   selected ? "" : "text-custom-text-200"
                                                 } flex cursor-pointer select-none items-center gap-2 truncate p-2`
                                               }
@@ -248,9 +233,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
               <button
                 type="button"
                 className={`flex ${
-                  isNotAllowed || uneditable
-                    ? "cursor-not-allowed"
-                    : "cursor-pointer hover:bg-custom-background-90"
+                  isNotAllowed || uneditable ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-90"
                 } items-center gap-1 rounded-2xl border border-custom-border-100 px-2 py-0.5 text-xs text-custom-text-200`}
                 onClick={() => setCreateLabelForm((prevData) => !prevData)}
                 disabled={uneditable}
@@ -273,7 +256,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
         <form className="flex items-center gap-x-2" onSubmit={handleSubmit(handleNewLabel)}>
           <div>
             <Popover className="relative">
-              {({ open }) => (
+              {({}) => (
                 <>
                   <Popover.Button className="grid place-items-center outline-none">
                     {watch("color") && watch("color") !== "" && (
@@ -298,7 +281,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
                     <Popover.Panel className="absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0">
                       <Controller
                         name="color"
-                        control={labelControl}
+                        control={control}
                         render={({ field: { value, onChange } }) => (
                           <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
                         )}
@@ -309,15 +292,25 @@ export const SidebarLabelSelect: React.FC<Props> = ({
               )}
             </Popover>
           </div>
-          <Input
-            id="name"
+          <Controller
+            control={control}
             name="name"
-            placeholder="Title"
-            register={register}
-            validations={{
+            rules={{
               required: "This is required",
             }}
-            autoComplete="off"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="name"
+                name="name"
+                type="text"
+                value={value ?? ""}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.name)}
+                placeholder="Title"
+                className="w-full"
+              />
+            )}
           />
           <button
             type="button"
@@ -326,11 +319,7 @@ export const SidebarLabelSelect: React.FC<Props> = ({
           >
             <XMarkIcon className="h-4 w-4 text-white" />
           </button>
-          <button
-            type="submit"
-            className="grid place-items-center rounded bg-green-500 p-2.5"
-            disabled={isSubmitting}
-          >
+          <button type="submit" className="grid place-items-center rounded bg-green-500 p-2.5" disabled={isSubmitting}>
             <PlusIcon className="h-4 w-4 text-white" />
           </button>
         </form>
diff --git a/web/components/issues/sidebar-select/module.tsx b/web/components/issues/sidebar-select/module.tsx
index edb95b983..6e55b7895 100644
--- a/web/components/issues/sidebar-select/module.tsx
+++ b/web/components/issues/sidebar-select/module.tsx
@@ -1,13 +1,11 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
 // services
-import modulesService from "services/modules.service";
+import { ModuleService } from "services/module.service";
 // ui
-import { Spinner, CustomSelect, Tooltip } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { Spinner, Tooltip } from "@plane/ui";
 // helper
 import { truncateText } from "helpers/string.helper";
 // types
@@ -21,27 +19,23 @@ type Props = {
   disabled?: boolean;
 };
 
-export const SidebarModuleSelect: React.FC<Props> = ({
-  issueDetail,
-  handleModuleChange,
-  disabled = false,
-}) => {
+const moduleService = new ModuleService();
+
+export const SidebarModuleSelect: React.FC<Props> = ({ issueDetail, handleModuleChange, disabled = false }) => {
   const router = useRouter();
   const { workspaceSlug, projectId, issueId } = router.query;
 
   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 removeIssueFromModule = (bridgeId: string, moduleId: string) => {
     if (!workspaceSlug || !projectId) return;
 
-    modulesService
+    moduleService
       .removeIssueFromModule(workspaceSlug as string, projectId as string, moduleId, bridgeId)
-      .then((res) => {
+      .then(() => {
         mutate(ISSUE_DETAILS(issueId as string));
 
         mutate(MODULE_ISSUES(moduleId));
@@ -59,9 +53,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
         <div>
           <Tooltip
             position="left"
-            tooltipContent={`${
-              modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"
-            }`}
+            tooltipContent={`${modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}`}
           >
             <button
               type="button"
@@ -69,11 +61,7 @@ export const SidebarModuleSelect: React.FC<Props> = ({
                 disabled ? "cursor-not-allowed" : ""
               }`}
             >
-              <span
-                className={`truncate ${
-                  issueModule ? "text-custom-text-100" : "text-custom-text-200"
-                }`}
-              >
+              <span className={`truncate ${issueModule ? "text-custom-text-100" : "text-custom-text-200"}`}>
                 {modules?.find((m) => m.id === issueModule?.module)?.name ?? "No module"}
               </span>
             </button>
diff --git a/web/components/issues/sidebar-select/parent.tsx b/web/components/issues/sidebar-select/parent.tsx
index dd5d4f55b..f94d50cc0 100644
--- a/web/components/issues/sidebar-select/parent.tsx
+++ b/web/components/issues/sidebar-select/parent.tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 // components
 import { ParentIssuesListModal } from "components/issues";
 // types
-import { IIssue, ISearchIssueResponse, UserAuth } from "types";
+import { IIssue, ISearchIssueResponse } from "types";
 
 type Props = {
   onChange: (value: string) => void;
@@ -13,11 +13,7 @@ type Props = {
   disabled?: boolean;
 };
 
-export const SidebarParentSelect: React.FC<Props> = ({
-  onChange,
-  issueDetails,
-  disabled = false,
-}) => {
+export const SidebarParentSelect: React.FC<Props> = ({ onChange, issueDetails, disabled = false }) => {
   const [isParentModalOpen, setIsParentModalOpen] = useState(false);
   const [selectedParentIssue, setSelectedParentIssue] = useState<ISearchIssueResponse | null>(null);
 
diff --git a/web/components/issues/sidebar-select/relates-to.tsx b/web/components/issues/sidebar-select/relates-to.tsx
index b9e56dbeb..393c6fa3b 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/issues.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/sidebar-select/state.tsx b/web/components/issues/sidebar-select/state.tsx
index 7ff4f13b8..ca62831b6 100644
--- a/web/components/issues/sidebar-select/state.tsx
+++ b/web/components/issues/sidebar-select/state.tsx
@@ -5,9 +5,10 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import stateService from "services/state.service";
+import { ProjectStateService } from "services/project";
 // ui
-import { Spinner, CustomSelect } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { Spinner } from "@plane/ui";
 // icons
 import { StateGroupIcon } from "components/icons";
 // helpers
@@ -22,15 +23,16 @@ 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;
 
   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 ? () => stateService.getStates(workspaceSlug as string, projectId as string) : null
   );
   const states = getStatesList(stateGroups);
 
diff --git a/web/components/issues/sidebar.tsx b/web/components/issues/sidebar.tsx
index e0c370eaf..b695c3d8f 100644
--- a/web/components/issues/sidebar.tsx
+++ b/web/components/issues/sidebar.tsx
@@ -1,10 +1,6 @@
 import React, { useCallback, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { Controller, UseFormWatch } from "react-hook-form";
 // hooks
 import useToast from "hooks/use-toast";
@@ -12,8 +8,8 @@ import useUserAuth from "hooks/use-user-auth";
 import useUserIssueNotificationSubscription from "hooks/use-issue-notification-subscription";
 import useEstimateOption from "hooks/use-estimate-option";
 // services
-import issuesService from "services/issues.service";
-import modulesService from "services/modules.service";
+import { IssueService } from "services/issue";
+import { ModuleService } from "services/module.service";
 // contexts
 import { useProjectMyMembership } from "contexts/project-member.context";
 // components
@@ -84,6 +80,9 @@ type Props = {
   uneditable?: boolean;
 };
 
+const issueService = new IssueService();
+const moduleService = new ModuleService();
+
 export const IssueDetailsSidebar: React.FC<Props> = ({
   control,
   submitChanges,
@@ -103,8 +102,11 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
 
   const { isEstimateActive } = useEstimateOption();
 
-  const { loading, handleSubscribe, handleUnsubscribe, subscribed } =
-    useUserIssueNotificationSubscription(workspaceSlug, projectId, issueId);
+  const { loading, handleSubscribe, handleUnsubscribe, subscribed } = useUserIssueNotificationSubscription(
+    workspaceSlug,
+    projectId,
+    issueId
+  );
 
   const { memberRole } = useProjectMyMembership();
 
@@ -114,7 +116,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
     (cycleDetails: ICycle) => {
       if (!workspaceSlug || !projectId || !issueDetail) return;
 
-      issuesService
+      issueService
         .addIssueToCycle(
           workspaceSlug as string,
           projectId as string,
@@ -124,7 +126,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
           },
           user
         )
-        .then((res) => {
+        .then(() => {
           mutate(ISSUE_DETAILS(issueId as string));
         });
     },
@@ -135,7 +137,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
     (moduleDetail: IModule) => {
       if (!workspaceSlug || !projectId || !issueDetail) return;
 
-      modulesService
+      moduleService
         .addIssuesToModule(
           workspaceSlug as string,
           projectId as string,
@@ -145,7 +147,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
           },
           user
         )
-        .then((res) => {
+        .then(() => {
           mutate(ISSUE_DETAILS(issueId as string));
         });
     },
@@ -157,7 +159,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
 
     const payload = { metadata: {}, ...formData };
 
-    await issuesService
+    await issueService
       .createIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, payload)
       .then(() => mutate(ISSUE_DETAILS(issueDetail.id)))
       .catch((err) => {
@@ -197,15 +199,9 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
       false
     );
 
-    await issuesService
-      .updateIssueLink(
-        workspaceSlug as string,
-        projectId as string,
-        issueDetail.id,
-        linkId,
-        payload
-      )
-      .then((res) => {
+    await issueService
+      .updateIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, linkId, payload)
+      .then(() => {
         mutate(ISSUE_DETAILS(issueDetail.id));
       })
       .catch((err) => {
@@ -224,9 +220,9 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
       false
     );
 
-    await issuesService
+    await issueService
       .deleteIssueLink(workspaceSlug as string, projectId as string, issueDetail.id, linkId)
-      .then((res) => {
+      .then(() => {
         mutate(ISSUE_DETAILS(issueDetail.id));
       })
       .catch((err) => {
@@ -235,12 +231,9 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
   };
 
   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/${projectId}/issues/${issueDetail?.id}`
-    ).then(() => {
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${issueDetail?.id}`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -264,9 +257,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
     fieldsToShow.includes("dueDate");
 
   const showThirdSection =
-    fieldsToShow.includes("all") ||
-    fieldsToShow.includes("cycle") ||
-    fieldsToShow.includes("module");
+    fieldsToShow.includes("all") || fieldsToShow.includes("cycle") || fieldsToShow.includes("module");
 
   const startDate = watchIssue("start_date");
   const targetDate = watchIssue("target_date");
@@ -413,30 +404,27 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
                     </div>
                   </div>
                 )}
-                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
-                  isEstimateActive && (
-                    <div className="flex flex-wrap items-center py-2">
-                      <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
-                        <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
-                        <p>Estimate</p>
-                      </div>
-                      <div className="sm:basis-1/2">
-                        <Controller
-                          control={control}
-                          name="estimate_point"
-                          render={({ field: { value } }) => (
-                            <SidebarEstimateSelect
-                              value={value}
-                              onChange={(val: number | null) =>
-                                submitChanges({ estimate_point: val })
-                              }
-                              disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
-                            />
-                          )}
-                        />
-                      </div>
+                {(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) && isEstimateActive && (
+                  <div className="flex flex-wrap items-center py-2">
+                    <div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
+                      <PlayIcon className="h-4 w-4 flex-shrink-0 -rotate-90" />
+                      <p>Estimate</p>
                     </div>
-                  )}
+                    <div className="sm:basis-1/2">
+                      <Controller
+                        control={control}
+                        name="estimate_point"
+                        render={({ field: { value } }) => (
+                          <SidebarEstimateSelect
+                            value={value}
+                            onChange={(val: number | null) => submitChanges({ estimate_point: val })}
+                            disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
+                          />
+                        )}
+                      />
+                    </div>
+                  </div>
+                )}
               </div>
             )}
             {showSecondSection && (
diff --git a/web/components/issues/sub-issues/issue.tsx b/web/components/issues/sub-issues/issue.tsx
index 4bb8ea234..99783df52 100644
--- a/web/components/issues/sub-issues/issue.tsx
+++ b/web/components/issues/sub-issues/issue.tsx
@@ -4,24 +4,16 @@ import { useRouter } from "next/router";
 // swr
 import { mutate } from "swr";
 // lucide icons
-import {
-  ChevronDown,
-  ChevronRight,
-  X,
-  Pencil,
-  Trash,
-  Link as LinkIcon,
-  Loader,
-} from "lucide-react";
+import { ChevronDown, ChevronRight, X, Pencil, Trash, Link as LinkIcon, Loader } from "lucide-react";
 // components
 import { IssuePeekOverview } from "components/issues/peek-overview";
 import { SubIssuesRootList } from "./issues-list";
 import { IssueProperty } from "./properties";
 // ui
-import { Tooltip, CustomMenu } from "components/ui";
-
+import { CustomMenu } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
+import { IUser, IIssue } from "types";
 import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
 // fetch keys
 import { SUB_ISSUES } from "constants/fetch-keys";
@@ -32,7 +24,7 @@ export interface ISubIssues {
   parentIssue: IIssue;
   issue: any;
   spacingLeft?: number;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   editable: boolean;
   removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
   issuesLoader: ISubIssuesRootLoaders;
@@ -100,10 +92,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
             )}
           </div>
 
-          <div
-            className="w-full flex items-center gap-2 cursor-pointer"
-            onClick={() => openPeekOverview(issue?.id)}
-          >
+          <div className="w-full flex items-center gap-2 cursor-pointer" onClick={() => openPeekOverview(issue?.id)}>
             <div
               className="flex-shrink-0 w-[6px] h-[6px] rounded-full"
               style={{
@@ -132,9 +121,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
           <div className="flex-shrink-0 text-sm">
             <CustomMenu width="auto" ellipsis>
               {editable && (
-                <CustomMenu.MenuItem
-                  onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}
-                >
+                <CustomMenu.MenuItem onClick={() => handleIssueCrudOperation("edit", parentIssue?.id, issue)}>
                   <div className="flex items-center justify-start gap-2">
                     <Pencil width={14} strokeWidth={2} />
                     <span>Edit issue</span>
@@ -143,9 +130,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
               )}
 
               {editable && (
-                <CustomMenu.MenuItem
-                  onClick={() => handleIssueCrudOperation("delete", parentIssue?.id, issue)}
-                >
+                <CustomMenu.MenuItem onClick={() => handleIssueCrudOperation("delete", parentIssue?.id, issue)}>
                   <div className="flex items-center justify-start gap-2">
                     <Trash width={14} strokeWidth={2} />
                     <span>Delete issue</span>
@@ -154,9 +139,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
               )}
 
               <CustomMenu.MenuItem
-                onClick={() =>
-                  copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)
-                }
+                onClick={() => copyText(`${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`)}
               >
                 <div className="flex items-center justify-start gap-2">
                   <LinkIcon width={14} strokeWidth={2} />
@@ -206,9 +189,7 @@ export const SubIssues: React.FC<ISubIssues> = ({
 
       {peekIssue && peekIssue === issue?.id && (
         <IssuePeekOverview
-          handleMutation={() =>
-            parentIssue && parentIssue?.id && mutate(SUB_ISSUES(parentIssue?.id))
-          }
+          handleMutation={() => parentIssue && parentIssue?.id && mutate(SUB_ISSUES(parentIssue?.id))}
           projectId={issue?.project ?? ""}
           workspaceSlug={workspaceSlug ?? ""}
           readOnly={!editable}
diff --git a/web/components/issues/sub-issues/issues-list.tsx b/web/components/issues/sub-issues/issues-list.tsx
index c79e64e91..32f6eb315 100644
--- a/web/components/issues/sub-issues/issues-list.tsx
+++ b/web/components/issues/sub-issues/issues-list.tsx
@@ -1,14 +1,13 @@
-import React from "react";
+import { useEffect } from "react";
 // swr
 import useSWR from "swr";
 // components
 import { SubIssues } from "./issue";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
-
+import { IUser, IIssue } from "types";
 import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";
 // services
-import issuesService from "services/issues.service";
+import { IssueService } from "services/issue";
 // fetch keys
 import { SUB_ISSUES } from "constants/fetch-keys";
 
@@ -17,7 +16,7 @@ export interface ISubIssuesRootList {
   projectId: string;
   parentIssue: IIssue;
   spacingLeft?: number;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   editable: boolean;
   removeIssueFromSubIssues: (parentIssueId: string, issue: IIssue) => void;
   issuesLoader: ISubIssuesRootLoaders;
@@ -30,6 +29,8 @@ export interface ISubIssuesRootList {
   ) => void;
 }
 
+const issueService = new IssueService();
+
 export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
   workspaceSlug,
   projectId,
@@ -44,15 +45,13 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
   handleIssueCrudOperation,
 }) => {
   const { data: issues, isLoading } = useSWR(
+    workspaceSlug && projectId && parentIssue && parentIssue?.id ? SUB_ISSUES(parentIssue?.id) : null,
     workspaceSlug && projectId && parentIssue && parentIssue?.id
-      ? SUB_ISSUES(parentIssue?.id)
-      : null,
-    workspaceSlug && projectId && parentIssue && parentIssue?.id
-      ? () => issuesService.subIssues(workspaceSlug, projectId, parentIssue.id)
+      ? () => issueService.subIssues(workspaceSlug, projectId, parentIssue.id)
       : null
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isLoading) {
       handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
     } else {
@@ -60,6 +59,7 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
         handleIssuesLoader({ key: "sub_issues", issueId: parentIssue?.id });
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading]);
 
   return (
@@ -86,9 +86,7 @@ export const SubIssuesRootList: React.FC<ISubIssuesRootList> = ({
         ))}
 
       <div
-        className={`absolute top-0 bottom-0  ${
-          spacingLeft > 10 ? `border-l border-custom-border-100` : ``
-        }`}
+        className={`absolute top-0 bottom-0  ${spacingLeft > 10 ? `border-l border-custom-border-100` : ``}`}
         style={{ left: `${spacingLeft - 12}px` }}
       />
     </div>
diff --git a/web/components/issues/sub-issues/properties.tsx b/web/components/issues/sub-issues/properties.tsx
index e2caefffa..4e54091d6 100644
--- a/web/components/issues/sub-issues/properties.tsx
+++ b/web/components/issues/sub-issues/properties.tsx
@@ -1,6 +1,9 @@
 import React from "react";
 // swr
 import { mutate } from "swr";
+// services
+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";
@@ -8,22 +11,23 @@ import { StateSelect } from "components/states";
 // hooks
 import useIssuesProperties from "hooks/use-issue-properties";
 // types
-import { ICurrentUserResponse, IIssue, IState } from "types";
+import { IUser, IIssue, IState } from "types";
 // fetch-keys
 import { SUB_ISSUES } from "constants/fetch-keys";
-// services
-import issuesService from "services/issues.service";
-import trackEventServices from "services/track-event.service";
 
 export interface IIssueProperty {
   workspaceSlug: string;
   projectId: string;
   parentIssue: IIssue;
   issue: IIssue;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   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,
@@ -46,7 +50,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
         issueId: issue.id,
       },
       "ISSUE_PROPERTY_UPDATE_PRIORITY",
-      user
+      user as IUser
     );
   };
 
@@ -58,7 +62,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
       state: data,
       state_detail: newState,
     });
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -68,10 +72,10 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
         issueId: issue.id,
       },
       "ISSUE_PROPERTY_UPDATE_STATE",
-      user
+      user as IUser
     );
     if (oldState?.group !== "completed" && newState?.group !== "completed") {
-      trackEventServices.trackIssueMarkedAsDoneEvent(
+      trackEventService.trackIssueMarkedAsDoneEvent(
         {
           workspaceSlug: issue.workspace_detail.slug,
           workspaceId: issue.workspace_detail.id,
@@ -80,7 +84,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
           projectName: issue.project_detail.name,
           issueId: issue.id,
         },
-        user
+        user as IUser
       );
     }
   };
@@ -95,7 +99,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
 
     partialUpdateIssue({ assignees_list: data, assignees: data });
 
-    trackEventServices.trackIssuePartialPropertyUpdateEvent(
+    trackEventService.trackIssuePartialPropertyUpdateEvent(
       {
         workspaceSlug,
         workspaceId: issue.workspace,
@@ -105,7 +109,7 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
         issueId: issue.id,
       },
       "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
-      user
+      user as IUser
     );
   };
 
@@ -123,13 +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),
@@ -182,12 +180,14 @@ export const IssueProperty: React.FC<IIssueProperty> = ({
 
       {properties.due_date && issue.target_date && (
         <div className="flex-shrink-0 w-[104px]">
-          <ViewDueDateSelect
-            issue={issue}
-            partialUpdateIssue={partialUpdateIssue}
-            user={user}
-            isNotAllowed={!editable}
-          />
+          {user && (
+            <ViewDueDateSelect
+              issue={issue}
+              partialUpdateIssue={partialUpdateIssue}
+              user={user}
+              isNotAllowed={!editable}
+            />
+          )}
         </div>
       )}
 
diff --git a/web/components/issues/sub-issues/root.tsx b/web/components/issues/sub-issues/root.tsx
index 881898a3f..2855aa0b5 100644
--- a/web/components/issues/sub-issues/root.tsx
+++ b/web/components/issues/sub-issues/root.tsx
@@ -14,21 +14,19 @@ import { ProgressBar } from "./progressbar";
 import { CustomMenu } from "components/ui";
 // hooks
 import { useProjectMyMembership } from "contexts/project-member.context";
-
 import useToast from "hooks/use-toast";
-
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import { ICurrentUserResponse, IIssue, ISearchIssueResponse } from "types";
+import { IUser, IIssue, ISearchIssueResponse } from "types";
 // services
-import issuesService from "services/issues.service";
+import { IssueService } from "services/issue";
 // fetch keys
 import { SUB_ISSUES } from "constants/fetch-keys";
 
 export interface ISubIssuesRoot {
   parentIssue: IIssue;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 }
 
 export interface ISubIssuesRootLoaders {
@@ -41,24 +39,23 @@ export interface ISubIssuesRootLoadersHandler {
   issueId: string;
 }
 
+const issueService = new IssueService();
+
 export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) => {
   const router = useRouter();
-  const { workspaceSlug, projectId, peekIssue } = router.query as {
+  const { workspaceSlug, projectId } = router.query as {
     workspaceSlug: string;
     projectId: string;
     peekIssue: string;
   };
 
   const { memberRole } = useProjectMyMembership();
-
   const { setToastAlert } = useToast();
 
   const { data: issues, isLoading } = useSWR(
+    workspaceSlug && projectId && parentIssue && parentIssue?.id ? SUB_ISSUES(parentIssue?.id) : null,
     workspaceSlug && projectId && parentIssue && parentIssue?.id
-      ? SUB_ISSUES(parentIssue?.id)
-      : null,
-    workspaceSlug && projectId && parentIssue && parentIssue?.id
-      ? () => issuesService.subIssues(workspaceSlug, projectId, parentIssue.id)
+      ? () => issueService.subIssues(workspaceSlug, projectId, parentIssue.id)
       : null
   );
 
@@ -122,15 +119,14 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
     const payload = {
       sub_issue_ids: data.map((i) => i.id),
     };
-
-    await issuesService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => {
+    await issueService.addSubIssues(workspaceSlug, projectId, issueId, payload).finally(() => {
       if (issueId) mutate(SUB_ISSUES(issueId));
     });
   };
 
   const removeIssueFromSubIssues = async (parentIssueId: string, issue: IIssue) => {
     if (!workspaceSlug || !parentIssue || !issue?.id) return;
-    issuesService
+    issueService
       .patchIssue(workspaceSlug, projectId, issue.id, { parent: null }, user)
       .then(async () => {
         if (parentIssueId) await mutate(SUB_ISSUES(parentIssueId));
@@ -152,8 +148,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
   };
 
   const copyText = (text: string) => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
     copyTextToClipboard(`${originURL}/${text}`).then(() => {
       setToastAlert({
         type: "success",
@@ -181,9 +176,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
               <div className="relative flex items-center gap-4 text-xs">
                 <div
                   className="rounded border border-custom-border-100 shadow p-1.5 px-2 flex items-center gap-1 hover:bg-custom-background-80 transition-all cursor-pointer select-none"
-                  onClick={() =>
-                    handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })
-                  }
+                  onClick={() => handleIssuesLoader({ key: "visibility", issueId: parentIssue?.id })}
                 >
                   <div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
                     {issuesLoader.visibility.includes(parentIssue?.id) ? (
@@ -199,10 +192,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                 <div className="w-full max-w-[250px] select-none">
                   <ProgressBar
                     total={issues?.sub_issues?.length || 0}
-                    done={
-                      (issues?.state_distribution?.cancelled || 0) +
-                      (issues?.state_distribution?.completed || 0)
-                    }
+                    done={(issues?.state_distribution?.cancelled || 0) + (issues?.state_distribution?.completed || 0)}
                   />
                 </div>
 
@@ -251,6 +241,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                     </>
                   }
                   buttonClassName="whitespace-nowrap"
+                  // position="left"
                   noBorder
                   noChevron
                 >
@@ -286,6 +277,7 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
                       </>
                     }
                     buttonClassName="whitespace-nowrap"
+                    // position="left"
                     noBorder
                     noChevron
                   >
@@ -322,17 +314,15 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
               }}
             />
           )}
-          {isEditable &&
-            issueCrudOperation?.existing?.toggle &&
-            issueCrudOperation?.existing?.issueId && (
-              <ExistingIssuesListModal
-                isOpen={issueCrudOperation?.existing?.toggle}
-                handleClose={() => handleIssueCrudOperation("existing", null)}
-                searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
-                handleOnSubmit={addAsSubIssueFromExistingIssues}
-                workspaceLevelToggle
-              />
-            )}
+          {isEditable && issueCrudOperation?.existing?.toggle && issueCrudOperation?.existing?.issueId && (
+            <ExistingIssuesListModal
+              isOpen={issueCrudOperation?.existing?.toggle}
+              handleClose={() => handleIssueCrudOperation("existing", null)}
+              searchParams={{ sub_issue: true, issue_id: issueCrudOperation?.existing?.issueId }}
+              handleOnSubmit={addAsSubIssueFromExistingIssues}
+              workspaceLevelToggle
+            />
+          )}
           {isEditable && issueCrudOperation?.edit?.toggle && issueCrudOperation?.edit?.issueId && (
             <>
               <CreateUpdateIssueModal
@@ -345,20 +335,18 @@ export const SubIssuesRoot: React.FC<ISubIssuesRoot> = ({ parentIssue, user }) =
               />
             </>
           )}
-          {isEditable &&
-            issueCrudOperation?.delete?.toggle &&
-            issueCrudOperation?.delete?.issueId && (
-              <DeleteIssueModal
-                isOpen={issueCrudOperation?.delete?.toggle}
-                handleClose={() => {
-                  mutateSubIssues(issueCrudOperation?.delete?.issueId);
-                  handleIssueCrudOperation("delete", null, null);
-                }}
-                data={issueCrudOperation?.delete?.issue}
-                user={user}
-                redirection={false}
-              />
-            )}
+          {isEditable && issueCrudOperation?.delete?.toggle && issueCrudOperation?.delete?.issueId && (
+            <DeleteIssueModal
+              isOpen={issueCrudOperation?.delete?.toggle}
+              handleClose={() => {
+                mutateSubIssues(issueCrudOperation?.delete?.issueId);
+                handleIssueCrudOperation("delete", null, null);
+              }}
+              data={issueCrudOperation?.delete?.issue}
+              user={user}
+              redirection={false}
+            />
+          )}
         </>
       )}
     </div>
diff --git a/web/components/issues/view-select/assignee.tsx b/web/components/issues/view-select/assignee.tsx
index 807d343e2..dba80eba6 100644
--- a/web/components/issues/view-select/assignee.tsx
+++ b/web/components/issues/view-select/assignee.tsx
@@ -1,20 +1,13 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
 // services
-import projectService from "services/project.service";
-import trackEventServices from "services/track-event.service";
+import { TrackEventService } from "services/track_event.service";
 // ui
-import { AssigneesList, Avatar, CustomSearchSelect, Icon, Tooltip } from "components/ui";
-// icons
-import { UserGroupIcon } from "@heroicons/react/24/outline";
+import { AssigneesList, Avatar, CustomSearchSelect, Icon } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
+import { IUser, IIssue } from "types";
+// hooks
 import useProjectMembers from "hooks/use-project-members";
 
 type Props = {
@@ -24,15 +17,17 @@ type Props = {
   tooltipPosition?: "top" | "bottom";
   selfPositioned?: boolean;
   customButton?: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
+const trackEventService = new TrackEventService();
+
 export const ViewAssigneeSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
-  position = "left",
-  selfPositioned = false,
+  // position = "left",
+  // selfPositioned = false,
   tooltipPosition = "top",
   user,
   isNotAllowed,
@@ -45,7 +40,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
 
   const { members } = useProjectMembers(workspaceSlug?.toString(), issue.project, fetchAssignees);
 
-  const options = members?.map((member) => ({
+  const options = members?.map((member: any) => ({
     value: member.member.id,
     query: member.member.display_name,
     content: (
@@ -96,7 +91,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
 
         partialUpdateIssue({ assignees_list: data }, issue);
 
-        trackEventServices.trackIssuePartialPropertyUpdateEvent(
+        trackEventService.trackIssuePartialPropertyUpdateEvent(
           {
             workspaceSlug,
             workspaceId: issue.workspace,
@@ -106,7 +101,7 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
             issueId: issue.id,
           },
           "ISSUE_PROPERTY_UPDATE_ASSIGNEE",
-          user
+          user as IUser
         );
       }}
       options={options}
diff --git a/web/components/issues/view-select/due-date.tsx b/web/components/issues/view-select/due-date.tsx
index 5cbc26452..978859478 100644
--- a/web/components/issues/view-select/due-date.tsx
+++ b/web/components/issues/view-select/due-date.tsx
@@ -1,13 +1,13 @@
 import { useRouter } from "next/router";
-
 // ui
-import { CustomDatePicker, Tooltip } from "components/ui";
+import { CustomDatePicker } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // helpers
 import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // services
-import trackEventServices from "services/track-event.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
+import { IUser, IIssue } from "types";
 import useIssuesView from "hooks/use-issues-view";
 
 type Props = {
@@ -17,10 +17,12 @@ type Props = {
   handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
   noBorder?: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser;
   isNotAllowed: boolean;
 };
 
+const trackEventService = new TrackEventService();
+
 export const ViewDueDateSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
@@ -42,9 +44,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
   return (
     <Tooltip
       tooltipHeading="Due date"
-      tooltipContent={
-        issue.target_date ? renderShortDateWithYearFormat(issue.target_date) ?? "N/A" : "N/A"
-      }
+      tooltipContent={issue.target_date ? renderShortDateWithYearFormat(issue.target_date) ?? "N/A" : "N/A"}
       position={tooltipPosition}
     >
       <div
@@ -66,7 +66,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
               },
               issue
             );
-            trackEventServices.trackIssuePartialPropertyUpdateEvent(
+            trackEventService.trackIssuePartialPropertyUpdateEvent(
               {
                 workspaceSlug,
                 workspaceId: issue.workspace,
@@ -80,9 +80,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
             );
           }}
           className={`${issue?.target_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
-            displayFilters.layout === "kanban"
-              ? "bg-custom-background-90"
-              : "bg-custom-background-100"
+            displayFilters.layout === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
           }`}
           minDate={minDate ?? undefined}
           noBorder={noBorder}
diff --git a/web/components/issues/view-select/estimate.tsx b/web/components/issues/view-select/estimate.tsx
index 0edf5e33f..0cbce8281 100644
--- a/web/components/issues/view-select/estimate.tsx
+++ b/web/components/issues/view-select/estimate.tsx
@@ -1,17 +1,16 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 // services
-import trackEventServices from "services/track-event.service";
+import { TrackEventService } from "services/track_event.service";
 // hooks
 import useEstimateOption from "hooks/use-estimate-option";
 // ui
-import { CustomSelect, Tooltip } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import { PlayIcon } from "@heroicons/react/24/outline";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
+import { IUser, IIssue } from "types";
 
 type Props = {
   issue: IIssue;
@@ -20,16 +19,18 @@ type Props = {
   tooltipPosition?: "top" | "bottom";
   selfPositioned?: boolean;
   customButton?: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
+const trackEventService = new TrackEventService();
+
 export const ViewEstimateSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
-  position = "left",
+  // position = "left",
   tooltipPosition = "top",
-  selfPositioned = false,
+  // selfPositioned = false,
   customButton = false,
   user,
   isNotAllowed,
@@ -57,7 +58,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
       value={issue.estimate_point}
       onChange={(val: number) => {
         partialUpdateIssue({ estimate_point: val }, issue);
-        trackEventServices.trackIssuePartialPropertyUpdateEvent(
+        trackEventService.trackIssuePartialPropertyUpdateEvent(
           {
             workspaceSlug,
             workspaceId: issue.workspace,
@@ -67,7 +68,7 @@ export const ViewEstimateSelect: React.FC<Props> = ({
             issueId: issue.id,
           },
           "ISSUE_PROPERTY_UPDATE_ESTIMATE",
-          user
+          user as IUser
         );
       }}
       {...(customButton ? { customButton: estimateLabels } : { label: estimateLabels })}
diff --git a/web/components/issues/view-select/label.tsx b/web/components/issues/view-select/label.tsx
index ae3fe1f50..e3e54f4d3 100644
--- a/web/components/issues/view-select/label.tsx
+++ b/web/components/issues/view-select/label.tsx
@@ -1,19 +1,17 @@
-import React, { useState } from "react";
-
+import { useState, FC } from "react";
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import issuesService from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // component
 import { CreateLabelModal } from "components/labels";
 // ui
-import { CustomSearchSelect, Tooltip } from "components/ui";
+import { CustomSearchSelect } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import { PlusIcon, TagIcon } from "@heroicons/react/24/outline";
 // types
-import { ICurrentUserResponse, IIssue, IIssueLabels } from "types";
+import { IUser, IIssue, IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
@@ -24,15 +22,17 @@ type Props = {
   selfPositioned?: boolean;
   tooltipPosition?: "top" | "bottom";
   customButton?: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
-export const ViewLabelSelect: React.FC<Props> = ({
+const issueLabelStore = new IssueLabelService();
+
+export const ViewLabelSelect: FC<Props> = ({
   issue,
   partialUpdateIssue,
-  position = "left",
-  selfPositioned = false,
+  // position = "left",
+  // selfPositioned = false,
   tooltipPosition = "top",
   user,
   isNotAllowed,
@@ -46,7 +46,7 @@ export const ViewLabelSelect: React.FC<Props> = ({
   const { data: issueLabels } = useSWR<IIssueLabels[]>(
     projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
     workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      ? () => issueLabelStore.getProjectIssueLabels(workspaceSlug as string, projectId as string)
       : null
   );
 
diff --git a/web/components/issues/view-select/priority.tsx b/web/components/issues/view-select/priority.tsx
index f19b682fc..5d9bca529 100644
--- a/web/components/issues/view-select/priority.tsx
+++ b/web/components/issues/view-select/priority.tsx
@@ -1,17 +1,16 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 // services
-import trackEventServices from "services/track-event.service";
+import { TrackEventService } from "services/track_event.service";
 // ui
-import { CustomSelect, Tooltip } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import { PriorityIcon } from "components/icons/priority-icon";
 // helpers
 import { capitalizeFirstLetter } from "helpers/string.helper";
 // types
-import { ICurrentUserResponse, IIssue, TIssuePriorities } from "types";
+import { IUser, IIssue, TIssuePriorities } from "types";
 // constants
 import { PRIORITIES } from "constants/project";
 
@@ -22,16 +21,18 @@ type Props = {
   tooltipPosition?: "top" | "bottom";
   selfPositioned?: boolean;
   noBorder?: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
+const trackEventService = new TrackEventService();
+
 export const ViewPrioritySelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
-  position = "left",
+  // position = "left",
   tooltipPosition = "top",
-  selfPositioned = false,
+  // selfPositioned = false,
   noBorder = false,
   user,
   isNotAllowed,
@@ -44,7 +45,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
       value={issue.priority}
       onChange={(data: TIssuePriorities) => {
         partialUpdateIssue({ priority: data }, issue);
-        trackEventServices.trackIssuePartialPropertyUpdateEvent(
+        trackEventService.trackIssuePartialPropertyUpdateEvent(
           {
             workspaceSlug,
             workspaceId: issue.workspace,
@@ -54,15 +55,16 @@ export const ViewPrioritySelect: React.FC<Props> = ({
             issueId: issue.id,
           },
           "ISSUE_PROPERTY_UPDATE_PRIORITY",
-          user
+          user as IUser
         );
       }}
       maxHeight="md"
       customButton={
-        <div
-          className={`grid place-items-center rounded ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-          } ${noBorder ? "" : "h-6 w-6 border shadow-sm"} ${
+        <button
+          type="button"
+          className={`grid place-items-center rounded ${isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"} ${
+            noBorder ? "" : "h-6 w-6 border shadow-sm"
+          } ${
             noBorder
               ? ""
               : issue.priority === "urgent"
@@ -70,11 +72,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
               : "border-custom-border-300 bg-custom-background-100"
           } items-center`}
         >
-          <Tooltip
-            tooltipHeading="Priority"
-            tooltipContent={issue.priority ?? "None"}
-            position={tooltipPosition}
-          >
+          <Tooltip tooltipHeading="Priority" tooltipContent={issue.priority ?? "None"} position={tooltipPosition}>
             <span className="flex gap-1 items-center text-custom-text-200 text-xs">
               <PriorityIcon
                 priority={issue.priority}
@@ -93,7 +91,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
               {noBorder ? capitalizeFirstLetter(issue.priority ?? "None") : ""}
             </span>
           </Tooltip>
-        </div>
+        </button>
       }
       noChevron
       disabled={isNotAllowed}
diff --git a/web/components/issues/view-select/start-date.tsx b/web/components/issues/view-select/start-date.tsx
index 14b78f6ac..147fcc0be 100644
--- a/web/components/issues/view-select/start-date.tsx
+++ b/web/components/issues/view-select/start-date.tsx
@@ -1,13 +1,14 @@
+import { FC } from "react";
 import { useRouter } from "next/router";
-
 // ui
-import { CustomDatePicker, Tooltip } from "components/ui";
+import { CustomDatePicker } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // helpers
-import { findHowManyDaysLeft, renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // services
-import trackEventServices from "services/track-event.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import { ICurrentUserResponse, IIssue } from "types";
+import { IUser, IIssue } from "types";
 import useIssuesView from "hooks/use-issues-view";
 
 type Props = {
@@ -17,11 +18,13 @@ type Props = {
   handleOnClose?: () => void;
   tooltipPosition?: "top" | "bottom";
   noBorder?: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   isNotAllowed: boolean;
 };
 
-export const ViewStartDateSelect: React.FC<Props> = ({
+const trackEventService = new TrackEventService();
+
+export const ViewStartDateSelect: FC<Props> = ({
   issue,
   partialUpdateIssue,
   handleOnOpen,
@@ -42,9 +45,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
   return (
     <Tooltip
       tooltipHeading="Start date"
-      tooltipContent={
-        issue.start_date ? renderShortDateWithYearFormat(issue.start_date) ?? "N/A" : "N/A"
-      }
+      tooltipContent={issue.start_date ? renderShortDateWithYearFormat(issue.start_date) ?? "N/A" : "N/A"}
       position={tooltipPosition}
     >
       <div className="group flex-shrink-0 relative max-w-[6.5rem]">
@@ -58,7 +59,7 @@ export const ViewStartDateSelect: React.FC<Props> = ({
               },
               issue
             );
-            trackEventServices.trackIssuePartialPropertyUpdateEvent(
+            trackEventService.trackIssuePartialPropertyUpdateEvent(
               {
                 workspaceSlug,
                 workspaceId: issue.workspace,
@@ -68,13 +69,11 @@ export const ViewStartDateSelect: React.FC<Props> = ({
                 issueId: issue.id,
               },
               "ISSUE_PROPERTY_UPDATE_DUE_DATE",
-              user
+              user as IUser
             );
           }}
           className={`${issue?.start_date ? "w-[6.5rem]" : "w-[5rem] text-center"} ${
-            displayFilters.layout === "kanban"
-              ? "bg-custom-background-90"
-              : "bg-custom-background-100"
+            displayFilters.layout === "kanban" ? "bg-custom-background-90" : "bg-custom-background-100"
           }`}
           maxDate={maxDate ?? undefined}
           noBorder={noBorder}
diff --git a/web/components/issues/workspace-views/workpace-view-issues.tsx b/web/components/issues/workspace-views/workpace-view-issues.tsx
deleted file mode 100644
index 78a12f807..000000000
--- 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 4618c331d..000000000
--- 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 4469804ac..000000000
--- 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 bcc83c38b..000000000
--- 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 25ddc338a..000000000
--- 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 d9db2f347..000000000
--- 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/components/labels/create-label-modal.tsx b/web/components/labels/create-label-modal.tsx
index 190b9e832..fa05ae93f 100644
--- a/web/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@@ -1,23 +1,17 @@
 import React, { useEffect } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// react-color
 import { TwitterPicker } from "react-color";
-// headless ui
 import { Dialog, Popover, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
-import type { ICurrentUserResponse, IIssueLabels, IState } from "types";
+import type { IUser, IIssueLabels, IState } from "types";
 // constants
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
@@ -28,7 +22,7 @@ type Props = {
   projectId: string;
   handleClose: () => void;
   onSuccess?: (response: IIssueLabels) => void;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
 const defaultValues: Partial<IState> = {
@@ -36,18 +30,13 @@ const defaultValues: Partial<IState> = {
   color: "rgb(var(--color-text-200))",
 };
 
-export const CreateLabelModal: React.FC<Props> = ({
-  isOpen,
-  projectId,
-  handleClose,
-  user,
-  onSuccess,
-}) => {
+const issueLabelService = new IssueLabelService();
+
+export const CreateLabelModal: React.FC<Props> = ({ isOpen, projectId, handleClose, user, onSuccess }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     watch,
@@ -70,14 +59,10 @@ export const CreateLabelModal: React.FC<Props> = ({
   const onSubmit = async (formData: IIssueLabels) => {
     if (!workspaceSlug) return;
 
-    await issuesService
+    await issueLabelService
       .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
       .then((res) => {
-        mutate<IIssueLabels[]>(
-          PROJECT_ISSUE_LABELS(projectId),
-          (prevData) => [res, ...(prevData ?? [])],
-          false
-        );
+        mutate<IIssueLabels[]>(PROJECT_ISSUE_LABELS(projectId), (prevData) => [res, ...(prevData ?? [])], false);
         onClose();
         if (onSuccess) onSuccess(res);
       })
@@ -115,10 +100,7 @@ export const CreateLabelModal: React.FC<Props> = ({
               <Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                       Create Label
                     </Dialog.Title>
                     <div className="mt-8 flex items-center gap-2">
@@ -176,27 +158,36 @@ export const CreateLabelModal: React.FC<Props> = ({
                         )}
                       </Popover>
                       <div className="flex w-full flex-col gap-0.5 justify-center">
-                        <Input
-                          type="text"
-                          id="name"
+                        <Controller
+                          control={control}
                           name="name"
-                          placeholder="Label title"
-                          autoComplete="off"
-                          error={errors.name}
-                          register={register}
-                          width="full"
-                          validations={{
+                          rules={{
                             required: "Label title is required",
                           }}
+                          render={({ field: { value, onChange, ref } }) => (
+                            <Input
+                              id="name"
+                              name="name"
+                              type="text"
+                              value={value}
+                              onChange={onChange}
+                              ref={ref}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Label title"
+                              className="resize-none text-xl w-full"
+                            />
+                          )}
                         />
                       </div>
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Creating Label..." : "Create Label"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/labels/create-update-label-inline.tsx b/web/components/labels/create-update-label-inline.tsx
index 264fb7901..b5ce8ccef 100644
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@@ -1,10 +1,6 @@
-import React, { forwardRef, useEffect } from "react";
-
+import { forwardRef, useEffect, Fragment } from "react";
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
@@ -13,9 +9,9 @@ import { TwitterPicker } from "react-color";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // ui
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";
 // fetch-keys
@@ -35,174 +31,171 @@ const defaultValues: Partial<IIssueLabels> = {
   color: "rgb(var(--color-text-200))",
 };
 
-export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(
-  function CreateUpdateLabelInline(props, ref) {
-    const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props;
+const issueLabelService = new IssueLabelService();
 
-    const router = useRouter();
-    const { workspaceSlug, projectId } = router.query;
+export const CreateUpdateLabelInline = forwardRef<HTMLDivElement, Props>(function CreateUpdateLabelInline(props, ref) {
+  const { labelForm, setLabelForm, isUpdating, labelToUpdate, onClose } = props;
 
-    const { user } = useUserAuth();
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
 
-    const {
-      handleSubmit,
-      control,
-      register,
-      reset,
-      formState: { errors, isSubmitting },
-      watch,
-      setValue,
-    } = useForm<IIssueLabels>({
-      defaultValues,
-    });
+  const { user } = useUserAuth();
 
-    const handleClose = () => {
-      setLabelForm(false);
-      reset(defaultValues);
-      if (onClose) onClose();
-    };
+  const {
+    handleSubmit,
+    control,
+    reset,
+    formState: { errors, isSubmitting },
+    watch,
+    setValue,
+  } = useForm<IIssueLabels>({
+    defaultValues,
+  });
 
-    const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
-      if (!workspaceSlug || !projectId || isSubmitting) return;
+  const handleClose = () => {
+    setLabelForm(false);
+    reset(defaultValues);
+    if (onClose) onClose();
+  };
 
-      await issuesService
-        .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
-        .then((res) => {
-          mutate<IIssueLabels[]>(
-            PROJECT_ISSUE_LABELS(projectId as string),
-            (prevData) => [res, ...(prevData ?? [])],
-            false
-          );
-          handleClose();
-        });
-    };
+  const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
 
-    const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
-      if (!workspaceSlug || !projectId || isSubmitting) return;
-
-      await issuesService
-        .patchIssueLabel(
-          workspaceSlug as string,
-          projectId as string,
-          labelToUpdate?.id ?? "",
-          formData,
-          user
-        )
-        .then(() => {
-          reset(defaultValues);
-          mutate<IIssueLabels[]>(
-            PROJECT_ISSUE_LABELS(projectId as string),
-            (prevData) =>
-              prevData?.map((p) => (p.id === labelToUpdate?.id ? { ...p, ...formData } : p)),
-            false
-          );
-          handleClose();
-        });
-    };
-
-    useEffect(() => {
-      if (!labelForm && isUpdating) return;
-
-      reset();
-    }, [labelForm, isUpdating, reset]);
-
-    useEffect(() => {
-      if (!labelToUpdate) return;
-
-      setValue(
-        "color",
-        labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"
-      );
-      setValue("name", labelToUpdate.name);
-    }, [labelToUpdate, setValue]);
-
-    useEffect(() => {
-      if (labelToUpdate) {
-        setValue(
-          "color",
-          labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000"
+    await issueLabelService
+      .createIssueLabel(workspaceSlug as string, projectId as string, formData, user)
+      .then((res) => {
+        mutate<IIssueLabels[]>(
+          PROJECT_ISSUE_LABELS(projectId as string),
+          (prevData) => [res, ...(prevData ?? [])],
+          false
         );
-        return;
-      }
+        handleClose();
+      });
+  };
 
-      setValue("color", getRandomLabelColor());
-    }, [labelToUpdate, setValue]);
+  const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
+    if (!workspaceSlug || !projectId || isSubmitting) return;
 
-    return (
-      <div
-        className={`flex scroll-m-8 items-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-2 ${
-          labelForm ? "" : "hidden"
-        }`}
-        ref={ref}
-      >
-        <div className="flex-shrink-0">
-          <Popover className="relative z-10 flex h-full w-full items-center justify-center">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className={`group inline-flex items-center text-base font-medium focus:outline-none ${
-                    open ? "text-custom-text-100" : "text-custom-text-200"
-                  }`}
-                >
-                  <span
-                    className="h-4 w-4 rounded-full"
-                    style={{
-                      backgroundColor: watch("color"),
-                    }}
+    await issueLabelService
+      .patchIssueLabel(workspaceSlug as string, projectId as string, labelToUpdate?.id ?? "", formData, user)
+      .then(() => {
+        reset(defaultValues);
+        mutate<IIssueLabels[]>(
+          PROJECT_ISSUE_LABELS(projectId as string),
+          (prevData) => prevData?.map((p) => (p.id === labelToUpdate?.id ? { ...p, ...formData } : p)),
+          false
+        );
+        handleClose();
+      });
+  };
+
+  useEffect(() => {
+    if (!labelForm && isUpdating) return;
+
+    reset();
+  }, [labelForm, isUpdating, reset]);
+
+  useEffect(() => {
+    if (!labelToUpdate) return;
+
+    setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
+    setValue("name", labelToUpdate.name);
+  }, [labelToUpdate, setValue]);
+
+  useEffect(() => {
+    if (labelToUpdate) {
+      setValue("color", labelToUpdate.color && labelToUpdate.color !== "" ? labelToUpdate.color : "#000");
+      return;
+    }
+
+    setValue("color", getRandomLabelColor());
+  }, [labelToUpdate, setValue]);
+
+  return (
+    <div
+      className={`flex scroll-m-8 items-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-2 ${
+        labelForm ? "" : "hidden"
+      }`}
+      ref={ref}
+    >
+      <div className="flex-shrink-0">
+        <Popover className="relative z-10 flex h-full w-full items-center justify-center">
+          {({ open }) => (
+            <>
+              <Popover.Button
+                className={`group inline-flex items-center text-base font-medium focus:outline-none ${
+                  open ? "text-custom-text-100" : "text-custom-text-200"
+                }`}
+              >
+                <span
+                  className="h-4 w-4 rounded-full"
+                  style={{
+                    backgroundColor: watch("color"),
+                  }}
+                />
+              </Popover.Button>
+
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-200"
+                enterFrom="opacity-0 translate-y-1"
+                enterTo="opacity-100 translate-y-0"
+                leave="transition ease-in duration-150"
+                leaveFrom="opacity-100 translate-y-0"
+                leaveTo="opacity-0 translate-y-1"
+              >
+                <Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
+                  <Controller
+                    name="color"
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <TwitterPicker
+                        colors={LABEL_COLOR_OPTIONS}
+                        color={value}
+                        onChange={(value) => onChange(value.hex)}
+                      />
+                    )}
                   />
-                </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-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
-                    <Controller
-                      name="color"
-                      control={control}
-                      render={({ field: { value, onChange } }) => (
-                        <TwitterPicker
-                          colors={LABEL_COLOR_OPTIONS}
-                          color={value}
-                          onChange={(value) => onChange(value.hex)}
-                        />
-                      )}
-                    />
-                  </Popover.Panel>
-                </Transition>
-              </>
-            )}
-          </Popover>
-        </div>
-        <div className="flex flex-1 flex-col justify-center">
-          <Input
-            type="text"
-            id="labelName"
-            name="name"
-            register={register}
-            placeholder="Label title"
-            validations={{
-              required: "Label title is required",
-            }}
-            error={errors.name}
-          />
-        </div>
-        <SecondaryButton onClick={() => handleClose()}>Cancel</SecondaryButton>
-        {isUpdating ? (
-          <PrimaryButton onClick={handleSubmit(handleLabelUpdate)} loading={isSubmitting}>
-            {isSubmitting ? "Updating" : "Update"}
-          </PrimaryButton>
-        ) : (
-          <PrimaryButton onClick={handleSubmit(handleLabelCreate)} loading={isSubmitting}>
-            {isSubmitting ? "Adding" : "Add"}
-          </PrimaryButton>
-        )}
+                </Popover.Panel>
+              </Transition>
+            </>
+          )}
+        </Popover>
       </div>
-    );
-  }
-);
+      <div className="flex flex-1 flex-col justify-center">
+        <Controller
+          control={control}
+          name="name"
+          rules={{
+            required: "Label title is required",
+          }}
+          render={({ field: { value, onChange, ref } }) => (
+            <Input
+              id="labelName"
+              name="name"
+              type="text"
+              value={value}
+              onChange={onChange}
+              ref={ref}
+              hasError={Boolean(errors.name)}
+              placeholder="Label title"
+              className="w-full"
+            />
+          )}
+        />
+      </div>
+      <Button variant="neutral-primary" onClick={() => handleClose()}>
+        Cancel
+      </Button>
+      {isUpdating ? (
+        <Button variant="primary" onClick={handleSubmit(handleLabelUpdate)} loading={isSubmitting}>
+          {isSubmitting ? "Updating" : "Update"}
+        </Button>
+      ) : (
+        <Button variant="primary" onClick={handleSubmit(handleLabelCreate)} loading={isSubmitting}>
+          {isSubmitting ? "Adding" : "Add"}
+        </Button>
+      )}
+    </div>
+  );
+});
diff --git a/web/components/labels/delete-label-modal.tsx b/web/components/labels/delete-label-modal.tsx
index 8535539f9..99c69827f 100644
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@@ -9,13 +9,13 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // services
-import issuesService from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
-import type { ICurrentUserResponse, IIssueLabels } from "types";
+import type { IUser, IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
@@ -23,9 +23,12 @@ type Props = {
   isOpen: boolean;
   onClose: () => void;
   data: IIssueLabels | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | 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(() => {
@@ -95,33 +98,29 @@ export const DeleteLabelModal: React.FC<Props> = ({ isOpen, onClose, data, user
                 <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-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Delete Label
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete label-{" "}
-                          <span className="font-medium text-custom-text-100">{data?.name}</span>?
-                          The label will be removed from all the issues.
+                          <span className="font-medium text-custom-text-100">{data?.name}</span>? The label will be
+                          removed from all the issues.
                         </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}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/labels/labels-list-modal.tsx b/web/components/labels/labels-list-modal.tsx
index 9042bde3a..e73ea3c5b 100644
--- a/web/components/labels/labels-list-modal.tsx
+++ b/web/components/labels/labels-list-modal.tsx
@@ -1,17 +1,13 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// headless ui
+import useSWR from "swr";
 import { Combobox, Dialog, Transition } from "@headlessui/react";
 // icons
 import { RectangleStackIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 // services
-import issuesService from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // types
-import { ICurrentUserResponse, IIssueLabels } from "types";
+import { IUser, IIssueLabels } from "types";
 // constants
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
@@ -19,9 +15,11 @@ type Props = {
   isOpen: boolean;
   handleClose: () => void;
   parent: IIssueLabels | undefined;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+const issueLabelService = new IssueLabelService();
+
 export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent, user }) => {
   const [query, setQuery] = useState("");
 
@@ -31,7 +29,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
   const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -58,7 +56,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
       false
     );
 
-    await issuesService
+    await issueLabelService
       .patchIssueLabel(
         workspaceSlug as string,
         projectId as string,
@@ -114,9 +112,7 @@ export const LabelsListModal: React.FC<Props> = ({ isOpen, handleClose, parent,
                   {filteredLabels.length > 0 && (
                     <li className="p-2">
                       {query === "" && (
-                        <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">
-                          Labels
-                        </h2>
+                        <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-custom-text-100">Labels</h2>
                       )}
                       <ul className="text-sm text-gray-700">
                         {filteredLabels.map((label) => {
diff --git a/web/components/labels/single-label-group.tsx b/web/components/labels/single-label-group.tsx
index 47a771174..1e8ec3086 100644
--- a/web/components/labels/single-label-group.tsx
+++ b/web/components/labels/single-label-group.tsx
@@ -7,20 +7,14 @@ import { mutate } from "swr";
 // headless ui
 import { Disclosure, Transition } from "@headlessui/react";
 // services
-import issuesService from "services/issues.service";
+import { IssueLabelService } from "services/issue";
 // ui
 import { CustomMenu } from "components/ui";
 // icons
-import {
-  ChevronDownIcon,
-  XMarkIcon,
-  PlusIcon,
-  PencilIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { ChevronDownIcon, XMarkIcon, PlusIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { Component, X } from "lucide-react";
 // types
-import { ICurrentUserResponse, IIssueLabels } from "types";
+import { IUser, IIssueLabels } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 
@@ -30,9 +24,12 @@ type Props = {
   addLabelToGroup: (parentLabel: IIssueLabels) => void;
   editLabel: (label: IIssueLabels) => void;
   handleLabelDelete: () => void;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+// services
+const issueLabelService = new IssueLabelService();
+
 export const SingleLabelGroup: React.FC<Props> = ({
   label,
   labelChildren,
@@ -58,7 +55,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
       false
     );
 
-    issuesService
+    issueLabelService
       .patchIssueLabel(
         workspaceSlug as string,
         projectId as string,
@@ -110,9 +107,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
               <Disclosure.Button>
                 <span>
                   <ChevronDownIcon
-                    className={`h-4 w-4 text-custom-sidebar-text-400 ${
-                      !open ? "rotate-90 transform" : ""
-                    }`}
+                    className={`h-4 w-4 text-custom-sidebar-text-400 ${!open ? "rotate-90 transform" : ""}`}
                   />
                 </span>
               </Disclosure.Button>
@@ -138,8 +133,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                       <span
                         className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
                         style={{
-                          backgroundColor:
-                            child.color && child.color !== "" ? child.color : "#000000",
+                          backgroundColor: child.color && child.color !== "" ? child.color : "#000000",
                         }}
                       />
                       {child.name}
@@ -169,10 +163,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
                       </div>
 
                       <div className="flex items-center">
-                        <button
-                          className="flex items-center justify-start gap-2"
-                          onClick={handleLabelDelete}
-                        >
+                        <button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
                           <X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
                         </button>
                       </div>
diff --git a/web/components/modules/delete-module-modal.tsx b/web/components/modules/delete-module-modal.tsx
index 9faede08f..7b362ba12 100644
--- a/web/components/modules/delete-module-modal.tsx
+++ b/web/components/modules/delete-module-modal.tsx
@@ -7,15 +7,15 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import modulesService from "services/modules.service";
+import { ModuleService } from "services/module.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
-import type { ICurrentUserResponse, IModule } from "types";
+import type { IUser, IModule } from "types";
 // fetch-keys
 import { MODULE_LIST } from "constants/fetch-keys";
 
@@ -23,9 +23,12 @@ type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   data?: IModule;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+// services
+const moduleService = new ModuleService();
+
 export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, user }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
@@ -44,13 +47,9 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
 
     if (!workspaceSlug || !projectId || !data) return;
 
-    mutate<IModule[]>(
-      MODULE_LIST(projectId as string),
-      (prevData) => prevData?.filter((m) => m.id !== data.id),
-      false
-    );
+    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`);
@@ -96,36 +95,29 @@ export const DeleteModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, us
                 <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"
-                      />
+                      <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"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Delete Module
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete module-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the module will be permanently removed. This
-                          action cannot be undone.
+                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
+                          data related to the module 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}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/modules/form.tsx b/web/components/modules/form.tsx
index 2715ba266..2aecd6422 100644
--- a/web/components/modules/form.tsx
+++ b/web/components/modules/form.tsx
@@ -1,11 +1,10 @@
 import { useEffect } from "react";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // components
 import { ModuleLeadSelect, ModuleMembersSelect, ModuleStatusSelect } from "components/modules";
 // ui
-import { DateSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { DateSelect } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // types
 import { IModule } from "types";
 
@@ -26,7 +25,6 @@ const defaultValues: Partial<IModule> = {
 
 export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     watch,
@@ -63,37 +61,49 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateModule)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-          {status ? "Update" : "Create"} Module
-        </h3>
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Module</h3>
         <div className="space-y-3">
           <div>
-            <Input
-              id="name"
+            <Controller
+              control={control}
               name="name"
-              type="name"
-              placeholder="Title"
-              autoComplete="off"
-              className="resize-none text-xl"
-              error={errors.name}
-              register={register}
-              validations={{
+              rules={{
                 required: "Title is required",
                 maxLength: {
                   value: 255,
                   message: "Title should be less than 255 characters",
                 },
               }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none text-xl w-full"
+                />
+              )}
             />
           </div>
           <div>
-            <TextArea
-              id="description"
+            <Controller
               name="description"
-              placeholder="Description"
-              className="h-32 resize-none text-sm"
-              error={errors.description}
-              register={register}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="description"
+                  name="description"
+                  value={value}
+                  placeholder="Description"
+                  onChange={onChange}
+                  className="h-32 resize-none text-sm"
+                  hasError={Boolean(errors?.description)}
+                />
+              )}
             />
           </div>
           <div className="flex flex-wrap items-center gap-2">
@@ -129,23 +139,21 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
             <Controller
               control={control}
               name="lead"
-              render={({ field: { value, onChange } }) => (
-                <ModuleLeadSelect value={value} onChange={onChange} />
-              )}
+              render={({ field: { value, onChange } }) => <ModuleLeadSelect value={value} onChange={onChange} />}
             />
             <Controller
               control={control}
               name="members"
-              render={({ field: { value, onChange } }) => (
-                <ModuleMembersSelect value={value} onChange={onChange} />
-              )}
+              render={({ field: { value, onChange } }) => <ModuleMembersSelect value={value} onChange={onChange} />}
             />
           </div>
         </div>
       </div>
       <div className="-mx-5 mt-5 flex justify-end gap-2 border-t border-custom-border-200 px-5 pt-5">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
+        <Button variant="neutral-primary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
           {status
             ? isSubmitting
               ? "Updating Module..."
@@ -153,7 +161,7 @@ export const ModuleForm: React.FC<Props> = ({ handleFormSubmit, handleClose, sta
             : isSubmitting
             ? "Creating Module..."
             : "Create Module"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/modules/gantt-chart/blocks.tsx b/web/components/modules/gantt-chart/blocks.tsx
index c6400ad82..f35d88e4c 100644
--- a/web/components/modules/gantt-chart/blocks.tsx
+++ b/web/components/modules/gantt-chart/blocks.tsx
@@ -1,7 +1,7 @@
 import { useRouter } from "next/router";
 
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import { ModuleStatusIcon } from "components/icons";
 // helpers
@@ -27,16 +27,13 @@ export const ModuleGanttBlock = ({ data }: { data: IModule }) => {
           <div className="space-y-1">
             <h5>{data?.name}</h5>
             <div>
-              {renderShortDate(data?.start_date ?? "")} to{" "}
-              {renderShortDate(data?.target_date ?? "")}
+              {renderShortDate(data?.start_date ?? "")} to {renderShortDate(data?.target_date ?? "")}
             </div>
           </div>
         }
         position="top-left"
       >
-        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">
-          {data?.name}
-        </div>
+        <div className="relative text-custom-text-100 text-sm truncate py-1 px-2.5 w-full">{data?.name}</div>
       </Tooltip>
     </div>
   );
diff --git a/web/components/modules/gantt-chart/index.ts b/web/components/modules/gantt-chart/index.ts
index 301b9f840..72eb6bfc5 100644
--- a/web/components/modules/gantt-chart/index.ts
+++ b/web/components/modules/gantt-chart/index.ts
@@ -1,3 +1,2 @@
 export * from "./blocks";
-export * from "./module-issues-layout";
 export * from "./modules-list-layout";
diff --git a/web/components/modules/gantt-chart/module-issues-layout.tsx b/web/components/modules/gantt-chart/module-issues-layout.tsx
deleted file mode 100644
index c7bef4b26..000000000
--- a/web/components/modules/gantt-chart/module-issues-layout.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { useRouter } from "next/router";
-
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-import useUser from "hooks/use-user";
-import useGanttChartModuleIssues from "hooks/gantt-chart/module-issues-view";
-import { updateGanttIssue } from "components/gantt-chart/hooks/block-update";
-import useProjectDetails from "hooks/use-project-details";
-// components
-import { GanttChartRoot, renderIssueBlocksStructure } from "components/gantt-chart";
-import { IssueGanttBlock, IssueGanttSidebarBlock, IssuePeekOverview } from "components/issues";
-// types
-import { IIssue } from "types";
-
-type Props = { disableUserActions: boolean };
-
-export const ModuleIssuesGanttChartView: React.FC<Props> = ({ disableUserActions }) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId, moduleId } = router.query;
-
-  const { displayFilters } = useIssuesView();
-
-  const { user } = useUser();
-  const { projectDetails } = useProjectDetails();
-
-  const { ganttIssues, mutateGanttIssues } = useGanttChartModuleIssues(
-    workspaceSlug as string,
-    projectId as string,
-    moduleId as string
-  );
-
-  const isAllowed = projectDetails?.member_role === 20 || projectDetails?.member_role === 15;
-
-  return (
-    <>
-      <IssuePeekOverview
-        handleMutation={() => mutateGanttIssues()}
-        projectId={projectId?.toString() ?? ""}
-        workspaceSlug={workspaceSlug?.toString() ?? ""}
-        readOnly={disableUserActions}
-      />
-      <div className="w-full h-full">
-        <GanttChartRoot
-          border={false}
-          title="Issues"
-          loaderTitle="Issues"
-          blocks={ganttIssues ? renderIssueBlocksStructure(ganttIssues as IIssue[]) : null}
-          blockUpdateHandler={(block, payload) =>
-            updateGanttIssue(block, payload, mutateGanttIssues, user, workspaceSlug?.toString())
-          }
-          SidebarBlockRender={IssueGanttSidebarBlock}
-          BlockRender={IssueGanttBlock}
-          enableBlockLeftResize={isAllowed}
-          enableBlockRightResize={isAllowed}
-          enableBlockMove={isAllowed}
-          enableReorder={displayFilters.order_by === "sort_order" && isAllowed}
-          bottomSpacing
-        />
-      </div>
-    </>
-  );
-};
diff --git a/web/components/modules/gantt-chart/modules-list-layout.tsx b/web/components/modules/gantt-chart/modules-list-layout.tsx
index b8ebd0185..f25b76921 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/modules.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;
@@ -54,25 +57,15 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules, mutateModules })
 
     const newPayload: any = { ...payload };
 
-    if (newPayload.sort_order && payload.sort_order)
-      newPayload.sort_order = payload.sort_order.newSortOrder;
+    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[]) =>
     blocks && blocks.length > 0
       ? blocks
-          .filter(
-            (b) =>
-              b.start_date && b.target_date && new Date(b.start_date) <= new Date(b.target_date)
-          )
+          .filter((b) => b.start_date && b.target_date && new Date(b.start_date) <= new Date(b.target_date))
           .map((block) => ({
             data: block,
             id: block.id,
diff --git a/web/components/modules/modal.tsx b/web/components/modules/modal.tsx
index e1aec085f..73cd3a229 100644
--- a/web/components/modules/modal.tsx
+++ b/web/components/modules/modal.tsx
@@ -1,21 +1,16 @@
-import React, { useEffect } from "react";
-
+import { Fragment } from "react";
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { useForm } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // components
 import { ModuleForm } from "components/modules";
 // services
-import modulesService from "services/modules.service";
+import { ModuleService } from "services/module.service";
 // hooks
 import useToast from "hooks/use-toast";
 // types
-import type { ICurrentUserResponse, IModule } from "types";
+import type { IUser, IModule } from "types";
 // fetch-keys
 import { MODULE_LIST } from "constants/fetch-keys";
 
@@ -23,7 +18,7 @@ type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   data?: IModule;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
 const defaultValues: Partial<IModule> = {
@@ -34,6 +29,8 @@ const defaultValues: Partial<IModule> = {
   members_list: [],
 };
 
+const moduleService = new ModuleService();
+
 export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -50,7 +47,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
   });
 
   const createModule = async (payload: Partial<IModule>) => {
-    await modulesService
+    await moduleService
       .createModule(workspaceSlug as string, projectId as string, payload, user)
       .then(() => {
         mutate(MODULE_LIST(projectId as string));
@@ -72,7 +69,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
   };
 
   const updateModule = async (payload: Partial<IModule>) => {
-    await modulesService
+    await moduleService
       .updateModule(workspaceSlug as string, projectId as string, data?.id ?? "", payload, user)
       .then((res) => {
         mutate<IModule[]>(
@@ -115,10 +112,10 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={React.Fragment}
+          as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -132,7 +129,7 @@ export const CreateUpdateModuleModal: React.FC<Props> = ({ isOpen, setIsOpen, da
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
             <Transition.Child
-              as={React.Fragment}
+              as={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"
diff --git a/web/components/modules/select/lead.tsx b/web/components/modules/select/lead.tsx
index e102cc21f..8ca5c66c0 100644
--- a/web/components/modules/select/lead.tsx
+++ b/web/components/modules/select/lead.tsx
@@ -1,12 +1,8 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-import Image from "next/image";
-
 import useSWR from "swr";
-
 // services
-import projectServices from "services/project.service";
+import { ProjectService } from "services/project";
 // ui
 import { Avatar, CustomSearchSelect } from "components/ui";
 // icons
@@ -19,6 +15,8 @@ type Props = {
   onChange: () => void;
 };
 
+const projectService = new ProjectService();
+
 export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -26,7 +24,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
   const { data: members } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -54,11 +52,7 @@ export const ModuleLeadSelect: React.FC<Props> = ({ value, onChange }) => {
           ) : (
             <UserCircleIcon className="h-4 w-4 text-custom-text-200" />
           )}
-          {selectedOption ? (
-            selectedOption?.display_name
-          ) : (
-            <span className="text-custom-text-200">Lead</span>
-          )}
+          {selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">Lead</span>}
         </div>
       }
       onChange={onChange}
diff --git a/web/components/modules/select/members.tsx b/web/components/modules/select/members.tsx
index a6e75f3a6..ce95fae9d 100644
--- a/web/components/modules/select/members.tsx
+++ b/web/components/modules/select/members.tsx
@@ -1,11 +1,8 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import projectServices from "services/project.service";
+import { ProjectService } from "services/project";
 // ui
 import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
 // icons
@@ -18,6 +15,8 @@ type Props = {
   onChange: () => void;
 };
 
+const projectService = new ProjectService();
+
 export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -25,7 +24,7 @@ export const ModuleMembersSelect: React.FC<Props> = ({ value, onChange }) => {
   const { data: members } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
+      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
       : null
   );
   const options = members?.map((member) => ({
diff --git a/web/components/modules/sidebar-select/select-lead.tsx b/web/components/modules/sidebar-select/select-lead.tsx
index 46e08af0b..88ddd73b4 100644
--- a/web/components/modules/sidebar-select/select-lead.tsx
+++ b/web/components/modules/sidebar-select/select-lead.tsx
@@ -1,17 +1,12 @@
-import React from "react";
-
-import Image from "next/image";
+import { FC } from "react";
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // ui
 import { Avatar, CustomSearchSelect } from "components/ui";
 // icons
 import { UserCircleIcon } from "@heroicons/react/24/outline";
-import User from "public/user.png";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -20,10 +15,14 @@ type Props = {
   onChange: (val: string) => void;
 };
 
-export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
+const projectService = new ProjectService();
+
+export const SidebarLeadSelect: FC<Props> = (props) => {
+  const { value, onChange } = props;
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
+  // fetch project members
   const { data: members } = useSWR(
     workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
     workspaceSlug && projectId
@@ -56,11 +55,7 @@ export const SidebarLeadSelect: React.FC<Props> = ({ value, onChange }) => {
           label={
             <div className="flex items-center gap-2">
               {selectedOption && <Avatar user={selectedOption} />}
-              {selectedOption ? (
-                selectedOption?.display_name
-              ) : (
-                <span className="text-custom-text-200">No lead</span>
-              )}
+              {selectedOption ? selectedOption?.display_name : <span className="text-custom-text-200">No lead</span>}
             </div>
           }
           options={options}
diff --git a/web/components/modules/sidebar-select/select-members.tsx b/web/components/modules/sidebar-select/select-members.tsx
index 7aa1e8e5e..b37acc4c1 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";
+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/modules/sidebar.tsx b/web/components/modules/sidebar.tsx
index e815d1950..90f33effe 100644
--- a/web/components/modules/sidebar.tsx
+++ b/web/components/modules/sidebar.tsx
@@ -1,12 +1,7 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// icons
 import {
   ArrowLongRightIcon,
   CalendarDaysIcon,
@@ -16,11 +11,10 @@ import {
   PlusIcon,
   TrashIcon,
 } from "@heroicons/react/24/outline";
-
 import { Disclosure, Popover, Transition } from "@headlessui/react";
 import DatePicker from "react-datepicker";
 // services
-import modulesService from "services/modules.service";
+import { ModuleService } from "services/module.service";
 // contexts
 import { useProjectMyMembership } from "contexts/project-member.context";
 // hooks
@@ -29,7 +23,8 @@ import useToast from "hooks/use-toast";
 import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
 import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
 import ProgressChart from "components/core/sidebar/progress-chart";
-import { CustomMenu, CustomSelect, Loader, ProgressBar } from "components/ui";
+import { CustomMenu, CustomSelect } from "components/ui";
+import { Loader, ProgressBar } from "@plane/ui";
 // icon
 import { ExclamationIcon } from "components/icons";
 import { LinkIcon } from "@heroicons/react/20/solid";
@@ -37,7 +32,7 @@ import { LinkIcon } from "@heroicons/react/20/solid";
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { capitalizeFirstLetter, copyTextToClipboard } from "helpers/string.helper";
 // types
-import { ICurrentUserResponse, IIssue, linkDetails, IModule, ModuleLink } from "types";
+import { IUser, IIssue, linkDetails, IModule, ModuleLink } from "types";
 // fetch-keys
 import { MODULE_DETAILS } from "constants/fetch-keys";
 // constant
@@ -55,9 +50,11 @@ type Props = {
   module?: IModule;
   isOpen: boolean;
   moduleIssues?: IIssue[];
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+const moduleService = new ModuleService();
+
 export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIssues, user }) => {
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
   const [moduleLinkModal, setModuleLinkModal] = useState(false);
@@ -86,7 +83,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
       false
     );
 
-    modulesService
+    moduleService
       .patchModule(workspaceSlug as string, projectId as string, moduleId as string, data, user)
       .then(() => mutate(MODULE_DETAILS(moduleId as string)))
       .catch((e) => console.log(e));
@@ -97,7 +94,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
 
     const payload = { metadata: {}, ...formData };
 
-    await modulesService
+    await moduleService
       .createModuleLink(workspaceSlug as string, projectId as string, moduleId as string, payload)
       .then(() => mutate(MODULE_DETAILS(moduleId as string)))
       .catch((err) => {
@@ -137,9 +134,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
       false
     );
 
-    await modulesService
+    await moduleService
       .updateModuleLink(workspaceSlug as string, projectId as string, module.id, linkId, payload)
-      .then((res) => {
+      .then(() => {
         mutate(MODULE_DETAILS(module.id));
       })
       .catch((err) => {
@@ -158,9 +155,9 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
       false
     );
 
-    await modulesService
+    await moduleService
       .deleteModuleLink(workspaceSlug as string, projectId as string, module.id, linkId)
-      .then((res) => {
+      .then(() => {
         mutate(MODULE_DETAILS(module.id));
       })
       .catch((err) => {
@@ -169,8 +166,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
   };
 
   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(`${workspaceSlug}/projects/${projectId}/modules/${module?.id}`)
       .then(() => {
@@ -198,9 +194,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
   const isStartValid = new Date(`${module?.start_date}`) <= new Date();
   const isEndValid = new Date(`${module?.target_date}`) >= new Date(`${module?.start_date}`);
 
-  const progressPercentage = module
-    ? Math.round((module.completed_issues / module.total_issues) * 100)
-    : null;
+  const progressPercentage = module ? Math.round((module.completed_issues / module.total_issues) * 100) : null;
 
   const handleEditLink = (link: linkDetails) => {
     setSelectedLinkToUpdate(link);
@@ -220,12 +214,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
         createIssueLink={handleCreateLink}
         updateIssueLink={handleUpdateLink}
       />
-      <DeleteModuleModal
-        isOpen={moduleDeleteModal}
-        setIsOpen={setModuleDeleteModal}
-        data={module}
-        user={user}
-      />
+      <DeleteModuleModal isOpen={moduleDeleteModal} setIsOpen={setModuleDeleteModal} data={module} user={user} />
       <div
         className={`fixed top-[66px] ${
           isOpen ? "right-0" : "-right-[24rem]"
@@ -262,7 +251,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                 </div>
                 <div className="relative flex h-full w-52 items-center gap-2 text-sm">
                   <Popover className="flex h-full items-center justify-center rounded-lg">
-                    {({ open }) => (
+                    {({}) => (
                       <>
                         <Popover.Button
                           className={`group flex h-full items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-xs ${
@@ -270,12 +259,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                           }`}
                         >
                           <CalendarDaysIcon className="h-3 w-3" />
-                          <span>
-                            {renderShortDateWithYearFormat(
-                              new Date(`${module.start_date}`),
-                              "Start date"
-                            )}
-                          </span>
+                          <span>{renderShortDateWithYearFormat(new Date(`${module.start_date}`), "Start date")}</span>
                         </Popover.Button>
 
                         <Transition
@@ -289,11 +273,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         >
                           <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
                             <DatePicker
-                              selected={
-                                watch("start_date")
-                                  ? new Date(`${watch("start_date")}`)
-                                  : new Date()
-                              }
+                              selected={watch("start_date") ? new Date(`${watch("start_date")}`) : new Date()}
                               onChange={(date) => {
                                 submitChanges({
                                   start_date: renderDateFormat(date),
@@ -315,7 +295,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                     <ArrowLongRightIcon className="h-3 w-3 text-custom-text-200" />
                   </span>
                   <Popover className="flex h-full items-center justify-center rounded-lg">
-                    {({ open }) => (
+                    {({}) => (
                       <>
                         <Popover.Button
                           className={`group flex items-center gap-2 whitespace-nowrap rounded border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 py-1 text-xs ${
@@ -324,12 +304,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         >
                           <CalendarDaysIcon className="h-3 w-3 " />
 
-                          <span>
-                            {renderShortDateWithYearFormat(
-                              new Date(`${module?.target_date}`),
-                              "End date"
-                            )}
-                          </span>
+                          <span>{renderShortDateWithYearFormat(new Date(`${module?.target_date}`), "End date")}</span>
                         </Popover.Button>
 
                         <Transition
@@ -343,11 +318,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         >
                           <Popover.Panel className="absolute top-10 -right-5 z-20  transform overflow-hidden">
                             <DatePicker
-                              selected={
-                                watch("target_date")
-                                  ? new Date(`${watch("target_date")}`)
-                                  : new Date()
-                              }
+                              selected={watch("target_date") ? new Date(`${watch("target_date")}`) : new Date()}
                               onChange={(date) => {
                                 submitChanges({
                                   target_date: renderDateFormat(date),
@@ -372,9 +343,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                 <div className="flex w-full flex-col items-start justify-start gap-2">
                   <div className="flex w-full items-start justify-between gap-2  ">
                     <div className="max-w-[300px]">
-                      <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">
-                        {module.name}
-                      </h4>
+                      <h4 className="text-xl font-semibold break-words w-full text-custom-text-100">{module.name}</h4>
                     </div>
                     <CustomMenu width="lg" ellipsis>
                       <CustomMenu.MenuItem onClick={() => setModuleDeleteModal(true)}>
@@ -431,10 +400,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
 
                     <div className="flex items-center gap-2.5 text-custom-text-200">
                       <span className="h-4 w-4">
-                        <ProgressBar
-                          value={module.completed_issues}
-                          maxValue={module.total_issues}
-                        />
+                        <ProgressBar value={module.completed_issues} maxValue={module.total_issues} />
                       </span>
                       {module.completed_issues}/{module.total_issues}
                     </div>
@@ -446,9 +412,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
             <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
-                  <div
-                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
-                  >
+                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-custom-text-200">Progress</span>
@@ -470,11 +434,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationIcon
-                            height={14}
-                            width={14}
-                            className="fill-current text-custom-text-200"
-                          />
+                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
                             Invalid date. Please enter valid date.
                           </span>
@@ -492,8 +452,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                                 </span>
                                 <span>
                                   Pending Issues -{" "}
-                                  {module.total_issues -
-                                    (module.completed_issues + module.cancelled_issues)}{" "}
+                                  {module.total_issues - (module.completed_issues + module.cancelled_issues)}{" "}
                                 </span>
                               </div>
 
@@ -530,9 +489,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
             <div className="flex w-full flex-col items-center justify-start gap-2 border-t border-custom-border-200 p-6">
               <Disclosure defaultOpen>
                 {({ open }) => (
-                  <div
-                    className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}
-                  >
+                  <div className={`relative  flex  h-full w-full flex-col ${open ? "" : "flex-row"}`}>
                     <div className="flex w-full items-center justify-between gap-2    ">
                       <div className="flex items-center justify-start gap-2 text-sm">
                         <span className="font-medium text-custom-text-200">Other Information</span>
@@ -547,11 +504,7 @@ export const ModuleDetailsSidebar: React.FC<Props> = ({ module, isOpen, moduleIs
                         </Disclosure.Button>
                       ) : (
                         <div className="flex items-center gap-1">
-                          <ExclamationIcon
-                            height={14}
-                            width={14}
-                            className="fill-current text-custom-text-200"
-                          />
+                          <ExclamationIcon height={14} width={14} className="fill-current text-custom-text-200" />
                           <span className="text-xs italic text-custom-text-200">
                             No issues found. Please add issue.
                           </span>
diff --git a/web/components/modules/single-module-card.tsx b/web/components/modules/single-module-card.tsx
index 7f7d761b5..981815736 100644
--- a/web/components/modules/single-module-card.tsx
+++ b/web/components/modules/single-module-card.tsx
@@ -1,42 +1,36 @@
 import React, { useState } from "react";
-
 import Link from "next/link";
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
 // services
-import modulesService from "services/modules.service";
+import { ModuleService } from "services/module.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
 import { DeleteModuleModal } from "components/modules";
 // ui
-import { AssigneesList, Avatar, CustomMenu, Tooltip } from "components/ui";
+import { AssigneesList, CustomMenu } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
-import {
-  CalendarDaysIcon,
-  LinkIcon,
-  PencilIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
-import { CalendarMonthIcon, TargetIcon } from "components/icons";
+import { CalendarDaysIcon, LinkIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+import { TargetIcon } from "components/icons";
 
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import { ICurrentUserResponse, IModule } from "types";
+import { IUser, IModule } from "types";
 // fetch-key
 import { MODULE_LIST } from "constants/fetch-keys";
 
 type Props = {
   module: IModule;
   handleEditModule: () => void;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+const moduleService = new ModuleService();
+
 export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, user }) => {
   const [moduleDeleteModal, setModuleDeleteModal] = useState(false);
 
@@ -45,8 +39,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
 
   const { setToastAlert } = useToast();
 
-  const completionPercentage =
-    ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
+  const completionPercentage = ((module.completed_issues + module.cancelled_issues) / module.total_issues) * 100;
 
   const handleDeleteModule = () => {
     if (!module) return;
@@ -67,7 +60,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
       false
     );
 
-    modulesService
+    moduleService
       .addModuleToFavorites(workspaceSlug as string, projectId as string, {
         module: module.id,
       })
@@ -93,24 +86,19 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
       false
     );
 
-    modulesService
-      .removeModuleFromFavorites(workspaceSlug as string, projectId as string, module.id)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't remove the module from favorites. Please try again.",
-        });
+    moduleService.removeModuleFromFavorites(workspaceSlug as string, projectId as string, module.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the module from favorites. Please try again.",
       });
+    });
   };
 
   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/${projectId}/modules/${module.id}`
-    ).then(() => {
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/modules/${module.id}`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -125,12 +113,7 @@ export const SingleModuleCard: React.FC<Props> = ({ module, handleEditModule, us
 
   return (
     <>
-      <DeleteModuleModal
-        isOpen={moduleDeleteModal}
-        setIsOpen={setModuleDeleteModal}
-        data={module}
-        user={user}
-      />
+      <DeleteModuleModal isOpen={moduleDeleteModal} setIsOpen={setModuleDeleteModal} data={module} user={user} />
       <div className="flex flex-col divide-y divide-custom-border-200 overflow-hidden rounded-[10px] border border-custom-border-200 bg-custom-background-100 text-xs">
         <div className="p-4">
           <div className="flex w-full flex-col gap-5">
diff --git a/web/components/notifications/notification-card.tsx b/web/components/notifications/notification-card.tsx
index acbd1c0c9..ec3c8300b 100644
--- a/web/components/notifications/notification-card.tsx
+++ b/web/components/notifications/notification-card.tsx
@@ -7,7 +7,8 @@ import { useRouter } from "next/router";
 import useToast from "hooks/use-toast";
 
 // icons
-import { CustomMenu, Icon, Tooltip } from "components/ui";
+import { CustomMenu, Icon } from "components/ui";
+import { Tooltip } from "@plane/ui";
 
 // helper
 import { stripHTML, replaceUnderscoreIfSnakeCase, truncateText } from "helpers/string.helper";
@@ -66,8 +67,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
         <span className="absolute top-1/2 left-2 -translate-y-1/2 w-1.5 h-1.5 bg-custom-primary-100 rounded-full" />
       )}
       <div className="relative w-12 h-12 rounded-full">
-        {notification.triggered_by_details.avatar &&
-        notification.triggered_by_details.avatar !== "" ? (
+        {notification.triggered_by_details.avatar && notification.triggered_by_details.avatar !== "" ? (
           <div className="h-12 w-12 rounded-full">
             <Image
               src={notification.triggered_by_details.avatar}
@@ -98,15 +98,13 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
               ? notification.triggered_by_details.first_name
               : notification.triggered_by_details.display_name}{" "}
           </span>
-          {notification.data.issue_activity.field !== "comment" &&
-            notification.data.issue_activity.verb}{" "}
+          {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.verb}{" "}
           {notification.data.issue_activity.field === "comment"
             ? "commented"
             : notification.data.issue_activity.field === "None"
             ? null
             : replaceUnderscoreIfSnakeCase(notification.data.issue_activity.field)}{" "}
-          {notification.data.issue_activity.field !== "comment" &&
-          notification.data.issue_activity.field !== "None"
+          {notification.data.issue_activity.field !== "comment" && notification.data.issue_activity.field !== "None"
             ? "to"
             : ""}
           <span className="font-semibold">
@@ -148,14 +146,11 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             <p className="text-custom-text-300 flex items-center justify-end gap-x-1 flex-shrink-0">
               <Icon iconName="schedule" className="!text-base -my-0.5" />
               <span>
-                Till {renderShortDate(notification.snoozed_till)},{" "}
-                {render12HourFormatTime(notification.snoozed_till)}
+                Till {renderShortDate(notification.snoozed_till)}, {render12HourFormatTime(notification.snoozed_till)}
               </span>
             </p>
           ) : (
-            <p className="text-custom-text-300 flex-shrink-0">
-              {formatDateDistance(notification.created_at)}
-            </p>
+            <p className="text-custom-text-300 flex-shrink-0">{formatDateDistance(notification.created_at)}</p>
           )}
         </div>
       </div>
@@ -168,9 +163,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             onClick: () => {
               markNotificationReadStatusToggle(notification.id).then(() => {
                 setToastAlert({
-                  title: notification.read_at
-                    ? "Notification marked as unread"
-                    : "Notification marked as read",
+                  title: notification.read_at ? "Notification marked as unread" : "Notification marked as read",
                   type: "success",
                 });
               });
@@ -183,9 +176,7 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
             onClick: () => {
               markNotificationArchivedStatus(notification.id).then(() => {
                 setToastAlert({
-                  title: notification.archived_at
-                    ? "Notification un-archived"
-                    : "Notification archived",
+                  title: notification.archived_at ? "Notification un-archived" : "Notification archived",
                   type: "success",
                 });
               });
diff --git a/web/components/notifications/notification-header.tsx b/web/components/notifications/notification-header.tsx
index 0d181da98..7bc390453 100644
--- a/web/components/notifications/notification-header.tsx
+++ b/web/components/notifications/notification-header.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 
 // components
-import { CustomMenu, Icon, Tooltip } from "components/ui";
+import { CustomMenu, Icon } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // helpers
 import { getNumberCount } from "helpers/string.helper";
 
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index f01fdafd1..8a9f2822f 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -1,20 +1,11 @@
 import React, { Fragment } from "react";
-
-// hooks
-import useTheme from "hooks/use-theme";
-
 import { Popover, Transition } from "@headlessui/react";
-
 // hooks
 import useUserNotification from "hooks/use-user-notifications";
-
 // components
-import { Loader, EmptyState, Tooltip } from "components/ui";
-import {
-  SnoozeNotificationModal,
-  NotificationCard,
-  NotificationHeader,
-} from "components/notifications";
+import { EmptyState } from "components/common";
+import { SnoozeNotificationModal, NotificationCard, NotificationHeader } from "components/notifications";
+import { Loader, Tooltip } from "@plane/ui";
 // icons
 import { NotificationsOutlined } from "@mui/icons-material";
 // images
@@ -54,20 +45,13 @@ export const NotificationPopover = () => {
     markAllNotificationsAsRead,
   } = useUserNotification();
 
-  // theme context
-  const { collapsed: sidebarCollapse } = useTheme();
-
   return (
     <>
       <SnoozeNotificationModal
         isOpen={selectedNotificationForSnooze !== null}
         onClose={() => setSelectedNotificationForSnooze(null)}
         onSubmit={markSnoozeNotification}
-        notification={
-          notifications?.find(
-            (notification) => notification.id === selectedNotificationForSnooze
-          ) || null
-        }
+        notification={notifications?.find((notification) => notification.id === selectedNotificationForSnooze) || null}
         onSuccess={() => {
           setSelectedNotificationForSnooze(null);
         }}
diff --git a/web/components/notifications/select-snooze-till-modal.tsx b/web/components/notifications/select-snooze-till-modal.tsx
index 99281350e..2a64853dd 100644
--- a/web/components/notifications/select-snooze-till-modal.tsx
+++ b/web/components/notifications/select-snooze-till-modal.tsx
@@ -1,28 +1,14 @@
-import React, { Fragment } from "react";
-
-// next
+import { Fragment, FC } from "react";
 import { useRouter } from "next/router";
-
-// react hook form
 import { useForm, Controller } from "react-hook-form";
-
-import { Transition, Dialog, Listbox } from "@headlessui/react";
-
+import { Transition, Dialog } from "@headlessui/react";
 // date helper
 import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper";
-
 // hooks
 import useToast from "hooks/use-toast";
-
 // components
-import {
-  PrimaryButton,
-  SecondaryButton,
-  Icon,
-  CustomDatePicker,
-  CustomSelect,
-} from "components/ui";
-
+import { Button } from "@plane/ui";
+import { Icon, CustomDatePicker, CustomSelect } from "components/ui";
 // types
 import type { IUserNotification } from "types";
 
@@ -48,7 +34,7 @@ const defaultValues: FormValues = {
 
 const timeStamps = getAllTimeIn30MinutesInterval();
 
-export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
+export const SnoozeNotificationModal: FC<SnoozeModalProps> = (props) => {
   const { isOpen, onClose, notification, onSuccess, onSubmit: handleSubmitSnooze } = props;
 
   const router = useRouter();
@@ -130,10 +116,10 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
   };
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={React.Fragment}
+          as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -147,7 +133,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex items-center justify-center min-h-full p-4 text-center">
             <Transition.Child
-              as={React.Fragment}
+              as={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"
@@ -158,10 +144,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
               <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="flex justify-between items-center">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                       Customize Snooze Time
                     </Dialog.Title>
 
@@ -174,9 +157,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
 
                   <div className="mt-5 flex items-center gap-3">
                     <div className="flex-1">
-                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">
-                        Pick a date
-                      </h6>
+                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">Pick a date</h6>
                       <Controller
                         name="date"
                         control={control}
@@ -197,9 +178,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
                       />
                     </div>
                     <div className="flex-1">
-                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">
-                        Pick a time
-                      </h6>
+                      <h6 className="block text-sm font-medium text-custom-text-400 mb-2">Pick a time</h6>
                       <Controller
                         control={control}
                         name="time"
@@ -215,9 +194,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
                                     {value} {watch("period").toLowerCase()}
                                   </span>
                                 ) : (
-                                  <span className="text-custom-text-400 text-sm">
-                                    Select a time
-                                  </span>
+                                  <span className="text-custom-text-400 text-sm">Select a time</span>
                                 )}
                               </div>
                             }
@@ -259,9 +236,7 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
                                 </CustomSelect.Option>
                               ))
                             ) : (
-                              <p className="text-custom-text-200 text-center p-3">
-                                No available time for this date.
-                              </p>
+                              <p className="text-custom-text-200 text-center p-3">No available time for this date.</p>
                             )}
                           </CustomSelect>
                         )}
@@ -271,10 +246,12 @@ export const SnoozeNotificationModal: React.FC<SnoozeModalProps> = (props) => {
 
                   <div className="mt-5 flex items-center justify-between gap-2">
                     <div className="w-full flex items-center gap-2 justify-end">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="neutral-primary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
                         {isSubmitting ? "Submitting..." : "Submit"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </div>
                 </form>
diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx
index 8f1b1fa41..c33101b5b 100644
--- a/web/components/onboarding/invite-members.tsx
+++ b/web/components/onboarding/invite-members.tsx
@@ -3,34 +3,27 @@ import React, { useEffect, useRef, useState } from "react";
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
 // react-hook-form
-import {
-  Control,
-  Controller,
-  FieldArrayWithId,
-  UseFieldArrayRemove,
-  useFieldArray,
-  useForm,
-} from "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
-import { Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // hooks
 import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 import { PlusIcon, XMarkIcon, CheckIcon } from "@heroicons/react/24/outline";
 // types
-import { ICurrentUserResponse, IWorkspace, TOnboardingSteps } from "types";
+import { IUser, IWorkspace, TOnboardingSteps } from "types";
 // constants
 import { ROLE } from "constants/workspace";
 
 type Props = {
   finishOnboarding: () => Promise<void>;
   stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   workspace: IWorkspace | undefined;
 };
 
@@ -52,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;
 
@@ -60,12 +56,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
-  useDynamicDropdownPosition(
-    isDropdownOpen,
-    () => setIsDropdownOpen(false),
-    buttonRef,
-    dropdownRef
-  );
+  useDynamicDropdownPosition(isDropdownOpen, () => setIsDropdownOpen(false), buttonRef, dropdownRef);
 
   return (
     <div className="group relative grid grid-cols-11 gap-4">
@@ -80,15 +71,18 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
               message: "Invalid Email ID",
             },
           }}
-          render={({ field }) => (
-            <>
-              <Input {...field} className="text-xs sm:text-sm" placeholder="Enter their email..." />
-              {errors.emails?.[index]?.email && (
-                <span className="text-red-500 text-xs">
-                  {errors.emails?.[index]?.email?.message}
-                </span>
-              )}
-            </>
+          render={({ field: { value, onChange, ref } }) => (
+            <Input
+              id={`emails.${index}.email`}
+              name={`emails.${index}.email`}
+              type="text"
+              value={value}
+              onChange={onChange}
+              ref={ref}
+              hasError={Boolean(errors.emails?.[index]?.email)}
+              placeholder="Enter their email..."
+              className="text-xs sm:text-sm w-full"
+            />
           )}
         />
       </div>
@@ -266,12 +260,12 @@ export const InviteMembers: React.FC<Props> = (props) => {
         </button>
       </div>
       <div className="flex items-center gap-4">
-        <PrimaryButton type="submit" disabled={!isValid} loading={isSubmitting} size="md">
+        <Button variant="primary" type="submit" disabled={!isValid} loading={isSubmitting} size="md">
           {isSubmitting ? "Sending..." : "Send Invite"}
-        </PrimaryButton>
-        <SecondaryButton className="border border-none bg-transparent" size="md" onClick={nextStep}>
+        </Button>
+        <Button variant="neutral-primary" size="md" onClick={nextStep}>
           Skip this step
-        </SecondaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/onboarding/join-workspaces.tsx b/web/components/onboarding/join-workspaces.tsx
index 84b5bdfc9..736480b55 100644
--- a/web/components/onboarding/join-workspaces.tsx
+++ b/web/components/onboarding/join-workspaces.tsx
@@ -3,11 +3,11 @@ 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
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { CheckCircleIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -25,11 +25,10 @@ type Props = {
   updateLastWorkspace: () => Promise<void>;
 };
 
-export const JoinWorkspaces: React.FC<Props> = ({
-  finishOnboarding,
-  stepChange,
-  updateLastWorkspace,
-}) => {
+// services
+const workspaceService = new WorkspaceService();
+
+export const JoinWorkspaces: React.FC<Props> = ({ finishOnboarding, stepChange, updateLastWorkspace }) => {
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
 
@@ -39,16 +38,11 @@ export const JoinWorkspaces: React.FC<Props> = ({
     workspaceService.userWorkspaceInvitations()
   );
 
-  const handleInvitation = (
-    workspace_invitation: IWorkspaceMemberInvitation,
-    action: "accepted" | "withdraw"
-  ) => {
+  const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
     if (action === "accepted") {
       setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
     } else if (action === "withdraw") {
-      setInvitationsRespond((prevData) =>
-        prevData.filter((item: string) => item !== workspace_invitation.id)
-      );
+      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
     }
   };
 
@@ -57,8 +51,7 @@ export const JoinWorkspaces: React.FC<Props> = ({
 
     await stepChange({ workspace_join: true });
 
-    if (user.onboarding_step.workspace_create && user.onboarding_step.workspace_invite)
-      await finishOnboarding();
+    if (user.onboarding_step.workspace_create && user.onboarding_step.workspace_invite) await finishOnboarding();
   };
 
   const submitInvitations = async () => {
@@ -91,9 +84,7 @@ export const JoinWorkspaces: React.FC<Props> = ({
               <div
                 key={invitation.id}
                 className={`flex cursor-pointer items-center gap-2 border py-5 px-3.5 rounded ${
-                  isSelected
-                    ? "border-custom-primary-100"
-                    : "border-custom-border-200 hover:bg-custom-background-80"
+                  isSelected ? "border-custom-primary-100" : "border-custom-border-200 hover:bg-custom-background-80"
                 }`}
                 onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
               >
@@ -115,16 +106,10 @@ export const JoinWorkspaces: React.FC<Props> = ({
                   </div>
                 </div>
                 <div className="min-w-0 flex-1">
-                  <div className="text-sm font-medium">
-                    {truncateText(invitation.workspace.name, 30)}
-                  </div>
+                  <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
                   <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
                 </div>
-                <span
-                  className={`flex-shrink-0 ${
-                    isSelected ? "text-custom-primary-100" : "text-custom-text-200"
-                  }`}
-                >
+                <span className={`flex-shrink-0 ${isSelected ? "text-custom-primary-100" : "text-custom-text-200"}`}>
                   <CheckCircleIcon className="h-5 w-5" />
                 </span>
               </div>
@@ -132,7 +117,8 @@ export const JoinWorkspaces: React.FC<Props> = ({
           })}
       </div>
       <div className="flex items-center gap-3">
-        <PrimaryButton
+        <Button
+          variant="primary"
           type="submit"
           size="md"
           onClick={submitInvitations}
@@ -140,14 +126,10 @@ export const JoinWorkspaces: React.FC<Props> = ({
           loading={isJoiningWorkspaces}
         >
           Accept & Join
-        </PrimaryButton>
-        <SecondaryButton
-          className="border border-none bg-transparent"
-          size="md"
-          onClick={handleNextStep}
-        >
+        </Button>
+        <Button variant="neutral-primary" size="md" onClick={handleNextStep}>
           Skip for now
-        </SecondaryButton>
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/onboarding/tour/root.tsx b/web/components/onboarding/tour/root.tsx
index a28d93d97..001e13be8 100644
--- a/web/components/onboarding/tour/root.tsx
+++ b/web/components/onboarding/tour/root.tsx
@@ -7,7 +7,7 @@ import useUser from "hooks/use-user";
 // components
 import { TourSidebar } from "components/onboarding";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { XMarkIcon } from "@heroicons/react/24/outline";
 // images
@@ -52,8 +52,7 @@ const TOUR_STEPS: {
   {
     key: "modules",
     title: "Break into modules",
-    description:
-      "Modules break your big thing into Projects or Features, to help you organize better.",
+    description: "Modules break your big thing into Projects or Features, to help you organize better.",
     image: ModulesTour,
     prevStep: "cycles",
     nextStep: "views",
@@ -97,11 +96,13 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
                 Welcome to Plane, {user?.first_name} {user?.last_name}
               </h3>
               <p className="text-custom-text-200 text-sm mt-3">
-                We{"'"}re glad that you decided to try out Plane. You can now manage your projects
-                with ease. Get started by creating a project.
+                We{"'"}re glad that you decided to try out Plane. You can now manage your projects with ease. Get
+                started by creating a project.
               </p>
               <div className="flex items-center gap-6 mt-8">
-                <PrimaryButton onClick={() => setStep("issues")}>Take a Product Tour</PrimaryButton>
+                <Button variant="primary" onClick={() => setStep("issues")}>
+                  Take a Product Tour
+                </Button>
                 <button
                   type="button"
                   className="outline-custom-text-100 bg-transparent text-custom-primary-100 text-xs font-medium"
@@ -137,19 +138,20 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
               <div className="h-full flex items-end justify-between gap-4 mt-3">
                 <div className="flex items-center gap-4">
                   {currentStep?.prevStep && (
-                    <SecondaryButton onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
+                    <Button variant="neutral-primary" onClick={() => setStep(currentStep.prevStep ?? "welcome")}>
                       Back
-                    </SecondaryButton>
+                    </Button>
                   )}
                   {currentStep?.nextStep && (
-                    <PrimaryButton onClick={() => setStep(currentStep.nextStep ?? "issues")}>
+                    <Button variant="primary" onClick={() => setStep(currentStep.nextStep ?? "issues")}>
                       Next
-                    </PrimaryButton>
+                    </Button>
                   )}
                 </div>
-                {TOUR_STEPS.findIndex((tourStep) => tourStep.key === step) ===
-                  TOUR_STEPS.length - 1 && (
-                  <PrimaryButton onClick={onComplete}>Create my first project</PrimaryButton>
+                {TOUR_STEPS.findIndex((tourStep) => tourStep.key === step) === TOUR_STEPS.length - 1 && (
+                  <Button variant="primary" onClick={onComplete}>
+                    Create my first project
+                  </Button>
                 )}
               </div>
             </div>
diff --git a/web/components/onboarding/user-details.tsx b/web/components/onboarding/user-details.tsx
index 8ac8b2070..9d0d0dcb2 100644
--- a/web/components/onboarding/user-details.tsx
+++ b/web/components/onboarding/user-details.tsx
@@ -1,17 +1,15 @@
 import { useEffect } from "react";
-
 import { mutate } from "swr";
-
-// react-hook-form
 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";
 // ui
-import { CustomSearchSelect, CustomSelect, Input, PrimaryButton } from "components/ui";
+import { CustomSearchSelect, CustomSelect } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
-import { ICurrentUserResponse, IUser } from "types";
+import { IUser } from "types";
 // fetch-keys
 import { CURRENT_USER } from "constants/fetch-keys";
 // helpers
@@ -36,11 +34,12 @@ const timeZoneOptions = TIME_ZONES.map((timeZone) => ({
   content: timeZone.label,
 }));
 
+const userService = new UserService();
+
 export const UserDetails: React.FC<Props> = ({ user }) => {
   const { setToastAlert } = useToast();
 
   const {
-    register,
     handleSubmit,
     control,
     reset,
@@ -63,7 +62,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
     await userService
       .updateUser(payload)
       .then(() => {
-        mutate<ICurrentUserResponse>(
+        mutate<IUser>(
           CURRENT_USER,
           (prevData) => {
             if (!prevData) return prevData;
@@ -82,7 +81,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
           message: "Details updated successfully.",
         });
       })
-      .catch((err) => {
+      .catch(() => {
         mutate(CURRENT_USER);
       });
   };
@@ -113,38 +112,56 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
       <div className="space-y-7 sm:w-3/4 md:w-2/5">
         <div className="space-y-1 text-sm">
           <label htmlFor="firstName">First Name</label>
-          <Input
-            id="firstName"
+          <Controller
+            control={control}
             name="first_name"
-            autoComplete="off"
-            placeholder="Enter your first name..."
-            register={register}
-            validations={{
+            rules={{
               required: "First name is required",
               maxLength: {
                 value: 24,
                 message: "First name cannot exceed the limit of 24 characters",
               },
             }}
-            error={errors.first_name}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="first_name"
+                name="first_name"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.first_name)}
+                placeholder="Enter your first name..."
+                className="w-full"
+              />
+            )}
           />
         </div>
         <div className="space-y-1 text-sm">
           <label htmlFor="lastName">Last Name</label>
-          <Input
-            id="lastName"
+          <Controller
+            control={control}
             name="last_name"
-            autoComplete="off"
-            register={register}
-            placeholder="Enter your last name..."
-            validations={{
+            rules={{
               required: "Last name is required",
               maxLength: {
                 value: 24,
                 message: "Last name cannot exceed the limit of 24 characters",
               },
             }}
-            error={errors.last_name}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="last_name"
+                name="last_name"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.last_name)}
+                placeholder="Enter your last name..."
+                className="w-full"
+              />
+            )}
           />
         </div>
         <div className="space-y-1 text-sm">
@@ -158,13 +175,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
                 <CustomSelect
                   value={value}
                   onChange={(val: any) => onChange(val)}
-                  label={
-                    value ? (
-                      value.toString()
-                    ) : (
-                      <span className="text-custom-text-400">Select your role...</span>
-                    )
-                  }
+                  label={value ? value.toString() : <span className="text-custom-text-400">Select your role...</span>}
                   input
                   width="w-full"
                 >
@@ -189,11 +200,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
               render={({ field: { value, onChange } }) => (
                 <CustomSearchSelect
                   value={value}
-                  label={
-                    value
-                      ? TIME_ZONES.find((t) => t.value === value)?.label ?? value
-                      : "Select a timezone"
-                  }
+                  label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
                   options={timeZoneOptions}
                   onChange={onChange}
                   optionsClassName="w-full"
@@ -201,16 +208,14 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
                 />
               )}
             />
-            {errors?.user_timezone && (
-              <span className="text-sm text-red-500">{errors.user_timezone.message}</span>
-            )}
+            {errors?.user_timezone && <span className="text-sm text-red-500">{errors.user_timezone.message}</span>}
           </div>
         </div>
       </div>
 
-      <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+      <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
         {isSubmitting ? "Updating..." : "Continue"}
-      </PrimaryButton>
+      </Button>
     </form>
   );
 };
diff --git a/web/components/onboarding/workspace.tsx b/web/components/onboarding/workspace.tsx
index 8f7442432..b0de35d78 100644
--- a/web/components/onboarding/workspace.tsx
+++ b/web/components/onboarding/workspace.tsx
@@ -1,9 +1,9 @@
 import { useState } from "react";
 
 // ui
-import { SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
-import { ICurrentUserResponse, IWorkspace, TOnboardingSteps } from "types";
+import { IUser, IWorkspace, TOnboardingSteps } from "types";
 // constants
 import { CreateWorkspaceForm } from "components/workspace";
 
@@ -11,17 +11,11 @@ type Props = {
   finishOnboarding: () => Promise<void>;
   stepChange: (steps: Partial<TOnboardingSteps>) => Promise<void>;
   updateLastWorkspace: () => Promise<void>;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   workspaces: IWorkspace[] | undefined;
 };
 
-export const Workspace: React.FC<Props> = ({
-  finishOnboarding,
-  stepChange,
-  updateLastWorkspace,
-  user,
-  workspaces,
-}) => {
+export const Workspace: React.FC<Props> = ({ finishOnboarding, stepChange, updateLastWorkspace, user, workspaces }) => {
   const [defaultValues, setDefaultValues] = useState({
     name: "",
     slug: "",
@@ -61,9 +55,9 @@ export const Workspace: React.FC<Props> = ({
           }}
           secondaryButton={
             workspaces ? (
-              <SecondaryButton onClick={secondaryButtonAction}>
+              <Button variant="neutral-primary" onClick={secondaryButtonAction}>
                 {workspaces.length > 0 ? "Skip & continue" : "Back"}
-              </SecondaryButton>
+              </Button>
             ) : undefined
           }
         />
diff --git a/web/components/page-views/index.ts b/web/components/page-views/index.ts
new file mode 100644
index 000000000..717070c97
--- /dev/null
+++ b/web/components/page-views/index.ts
@@ -0,0 +1 @@
+export * from "./signin";
diff --git a/web/components/page-views/signin.tsx b/web/components/page-views/signin.tsx
new file mode 100644
index 000000000..90dbbf594
--- /dev/null
+++ b/web/components/page-views/signin.tsx
@@ -0,0 +1,216 @@
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+import Image from "next/image";
+import { useRouter } from "next/router";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+// services
+import { AuthService } from "services/auth.service";
+import { AppConfigService } from "services/app_config.service";
+// components
+import {
+  GoogleLoginButton,
+  GithubLoginButton,
+  EmailCodeForm,
+  EmailPasswordForm,
+  EmailPasswordFormValues,
+} from "components/account";
+// ui
+import { Loader, Spinner } from "@plane/ui";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+import { IUserSettings } from "types";
+import { useState } from "react";
+
+const appConfigService = new AppConfigService();
+const authService = new AuthService();
+
+export const SignInView = observer(() => {
+  const { user: userStore } = useMobxStore();
+  // router
+  const router = useRouter();
+  // states
+  const [isLoading, setLoading] = useState(false);
+  // toast
+  const { setToastAlert } = useToast();
+  // fetch app config
+  const { data, error } = useSWR("APP_CONFIG", () => appConfigService.envConfig());
+  // fetch user info
+  useSWR("USER_INFO", () => userStore.fetchCurrentUser());
+  // computed
+  const enableEmailPassword =
+    data &&
+    (data?.email_password_login || !(data?.email_password_login || data?.magic_login || data?.google || data?.github));
+
+  const handleLoginRedirection = () =>
+    userStore
+      .fetchCurrentUserSettings()
+      .then((userSettings: IUserSettings) => {
+        const workspaceSlug =
+          userSettings?.workspace?.last_workspace_slug || userSettings?.workspace?.fallback_workspace_slug;
+        router.push(`/${workspaceSlug}`);
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+
+  const handleGoogleSignIn = async ({ clientId, credential }: any) => {
+    try {
+      setLoading(true);
+      if (clientId && credential) {
+        const socialAuthPayload = {
+          medium: "google",
+          credential,
+          clientId,
+        };
+        const response = await authService.socialAuth(socialAuthPayload);
+        if (response) {
+          handleLoginRedirection();
+        }
+      } else {
+        setLoading(false);
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      setLoading(false);
+      setToastAlert({
+        title: "Error signing in!",
+        type: "error",
+        message: err?.error || "Something went wrong. Please try again later or contact the support team.",
+      });
+    }
+  };
+
+  const handleGitHubSignIn = async (credential: string) => {
+    try {
+      setLoading(true);
+      if (data && data.github && credential) {
+        const socialAuthPayload = {
+          medium: "github",
+          credential,
+          clientId: data.github,
+        };
+        const response = await authService.socialAuth(socialAuthPayload);
+        if (response) {
+          handleLoginRedirection();
+        }
+      } else {
+        setLoading(false);
+        throw Error("Cant find credentials");
+      }
+    } catch (err: any) {
+      setLoading(false);
+      setToastAlert({
+        title: "Error signing in!",
+        type: "error",
+        message: err?.error || "Something went wrong. Please try again later or contact the support team.",
+      });
+    }
+  };
+
+  const handlePasswordSignIn = (formData: EmailPasswordFormValues) => {
+    setLoading(true);
+    return authService
+      .emailLogin(formData)
+      .then(() => {
+        handleLoginRedirection();
+      })
+      .catch((err) => {
+        setLoading(false);
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: err?.error || "Something went wrong. Please try again later or contact the support team.",
+        });
+      });
+  };
+
+  const handleEmailCodeSignIn = async (response: any) => {
+    try {
+      setLoading(true);
+      if (response) {
+        handleLoginRedirection();
+      }
+    } catch (err: any) {
+      setLoading(false);
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: err?.error || "Something went wrong. Please try again later or contact the support team.",
+      });
+    }
+  };
+
+  return (
+    <>
+      {isLoading ? (
+        <div className="grid place-items-center h-screen">
+          <Spinner />
+        </div>
+      ) : (
+        <>
+          <>
+            <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+            <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+              <div className="grid place-items-center bg-custom-background-100">
+                <div className="h-[30px] w-[30px]">
+                  <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+                </div>
+              </div>
+            </div>
+          </>
+          <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
+            <div>
+              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
+                Sign in to Plane
+              </h1>
+
+              {!data && !error ? (
+                <div className="pt-10 w-ful">
+                  <Loader className="space-y-4 w-full pb-4">
+                    <Loader.Item height="46px" width="360px" />
+                    <Loader.Item height="46px" width="360px" />
+                  </Loader>
+
+                  <Loader className="space-y-4 w-full pt-4">
+                    <Loader.Item height="46px" width="360px" />
+                    <Loader.Item height="46px" width="360px" />
+                  </Loader>
+                </div>
+              ) : (
+                <>
+                  <>
+                    {enableEmailPassword && <EmailPasswordForm onSubmit={handlePasswordSignIn} />}
+                    {data?.magic_login && (
+                      <div className="flex flex-col divide-y divide-custom-border-200">
+                        <div className="pb-7">
+                          <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
+                        </div>
+                      </div>
+                    )}
+                    <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
+                      {data?.google && <GoogleLoginButton clientId={data?.google} handleSignIn={handleGoogleSignIn} />}
+                      {data?.github && <GithubLoginButton clientId={data?.github} handleSignIn={handleGitHubSignIn} />}
+                    </div>
+                  </>
+                  <p className="pt-16 text-custom-text-200 text-sm text-center">
+                    By signing up, you agree to the{" "}
+                    <a
+                      href="https://plane.so/terms-and-conditions"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="font-medium underline"
+                    >
+                      Terms & Conditions
+                    </a>
+                  </p>
+                </>
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+});
diff --git a/web/components/pages/create-block.tsx b/web/components/pages/create-block.tsx
index dd3c63c26..22f140bc3 100644
--- a/web/components/pages/create-block.tsx
+++ b/web/components/pages/create-block.tsx
@@ -1,22 +1,16 @@
-import React, { KeyboardEventHandler, useCallback, useEffect, useState } from "react";
-
+import { FC } from "react";
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
 import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // services
-import pagesService from "services/pages.service";
-
+import { PageService } from "services/page.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { TextArea } from "components/ui";
+import { TextArea } from "@plane/ui";
 // types
-import { ICurrentUserResponse, IPageBlock } from "types";
+import { IUser, IPageBlock } from "types";
 // fetch-keys
 import { PAGE_BLOCKS_LIST } from "constants/fetch-keys";
 
@@ -25,26 +19,25 @@ const defaultValues = {
 };
 
 type Props = {
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
-export const CreateBlock: React.FC<Props> = ({ user }) => {
-  const [blockTitle, setBlockTitle] = useState("");
+const pageService = new PageService();
 
+export const CreateBlock: FC<Props> = ({ user }) => {
+  // const [blockTitle, setBlockTitle] = useState("");
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId, pageId } = router.query;
-
+  // toast
   const { setToastAlert } = useToast();
-
+  // form info
   const {
     handleSubmit,
-    register,
     control,
     watch,
-    setValue,
-    setFocus,
     reset,
-    formState: { isSubmitting },
+    formState: { errors },
   } = useForm<IPageBlock>({
     defaultValues,
   });
@@ -52,7 +45,7 @@ export const CreateBlock: React.FC<Props> = ({ user }) => {
   const createPageBlock = async () => {
     if (!workspaceSlug || !projectId || !pageId) return;
 
-    await pagesService
+    await pageService
       .createPageBlock(
         workspaceSlug as string,
         projectId as string,
@@ -81,8 +74,7 @@ export const CreateBlock: React.FC<Props> = ({ user }) => {
   };
 
   const handleKeyDown = (e: any) => {
-    const keyCombination =
-      ((e.ctrlKey || e.metaKey) && e.key === "Enter") || (e.shiftKey && e.key === "Enter");
+    const keyCombination = ((e.ctrlKey || e.metaKey) && e.key === "Enter") || (e.shiftKey && e.key === "Enter");
 
     if (e.key === "Enter" && !keyCombination) {
       if (watch("name") && watch("name") !== "") {
@@ -100,16 +92,23 @@ export const CreateBlock: React.FC<Props> = ({ user }) => {
         onSubmit={handleSubmit(createPageBlock)}
       >
         <div className="flex min-h-full w-full">
-          <TextArea
-            id="name"
+          <Controller
             name="name"
-            placeholder="Title"
-            register={register}
-            className="min-h-full block w-full resize-none overflow-hidden border-none bg-transparent px-1 py-1 text-sm font-medium"
-            role="textbox"
-            onKeyDown={handleKeyDown}
-            maxLength={255}
-            noPadding
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <TextArea
+                id="name"
+                name="name"
+                value={value}
+                placeholder="Title"
+                role="textbox"
+                onKeyDown={handleKeyDown}
+                maxLength={255}
+                onChange={onChange}
+                className="min-h-full block w-full resize-none overflow-hidden border-none bg-transparent !px-1 !py-1 text-sm font-medium"
+                hasError={Boolean(errors?.name)}
+              />
+            )}
           />
         </div>
 
diff --git a/web/components/pages/create-update-block-inline.tsx b/web/components/pages/create-update-block-inline.tsx
index 49d6fbeed..f87b1e6f3 100644
--- a/web/components/pages/create-update-block-inline.tsx
+++ b/web/components/pages/create-update-block-inline.tsx
@@ -1,32 +1,31 @@
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, FC, Dispatch, SetStateAction, useRef } from "react";
 import { useRouter } from "next/router";
 import { mutate } from "swr";
 import { SparklesIcon } from "@heroicons/react/24/outline";
 import { Controller, useForm } from "react-hook-form";
 // services
-import pagesService from "services/pages.service";
-import issuesService from "services/issues.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
 import { GptAssistantModal } from "components/core";
+import { Button, TextArea } from "@plane/ui";
 import { RichTextEditorWithRef } from "@plane/rich-text-editor";
-import { PrimaryButton, SecondaryButton, TextArea } from "components/ui";
 // types
-import { ICurrentUserResponse, IPageBlock } from "types";
+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;
   data?: IPageBlock;
   handleAiAssistance?: (response: string) => void;
-  setIsSyncing?: React.Dispatch<React.SetStateAction<boolean>>;
+  setIsSyncing?: Dispatch<SetStateAction<boolean>>;
   focus?: keyof IPageBlock;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
 const defaultValues = {
@@ -35,7 +34,12 @@ const defaultValues = {
   description_html: null,
 };
 
-export const CreateUpdateBlockInline: React.FC<Props> = ({
+const aiService = new AIService();
+const pagesService = new PageService();
+const issueService = new IssueService();
+const fileService = new FileService();
+
+export const CreateUpdateBlockInline: FC<Props> = ({
   handleClose,
   data,
   handleAiAssistance,
@@ -46,7 +50,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
   const [gptAssistantModal, setGptAssistantModal] = useState(false);
 
-  const editorRef = React.useRef<any>(null);
+  const editorRef = useRef<any>(null);
 
   const router = useRouter();
   const { workspaceSlug, projectId, pageId } = router.query;
@@ -55,13 +59,12 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
 
   const {
     handleSubmit,
-    register,
     control,
     watch,
     setValue,
     setFocus,
     reset,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
   } = useForm<IPageBlock>({
     defaultValues,
   });
@@ -142,7 +145,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
           mutate(PAGE_BLOCKS_LIST(pageId as string));
           editorRef.current?.setEditorValue(res.description_html);
           if (data.issue && data.sync)
-            issuesService
+            issueService
               .patchIssue(
                 workspaceSlug as string,
                 projectId as string,
@@ -197,8 +200,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
           setToastAlert({
             type: "error",
             title: "Error!",
-            message:
-              "You have reached the maximum number of requests of 50 requests per month per user.",
+            message: "You have reached the maximum number of requests of 50 requests per month per user.",
           });
         else
           setToastAlert({
@@ -264,14 +266,22 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
       >
         <div className="pt-2">
           <div className="flex justify-between">
-            <TextArea
-              id="name"
+            <Controller
               name="name"
-              placeholder="Title"
-              register={register}
-              className="min-h-10 font medium block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base"
-              autoComplete="off"
-              maxLength={255}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="name"
+                  name="name"
+                  value={value}
+                  placeholder="Title"
+                  onChange={onChange}
+                  className="min-h-10 font medium block w-full resize-none overflow-hidden border-none bg-transparent py-1 text-base"
+                  autoComplete="off"
+                  maxLength={255}
+                  hasError={Boolean(errors?.name)}
+                />
+              )}
             />
           </div>
           <div className="page-block-section relative -mt-2 text-custom-text-200">
@@ -297,9 +307,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
                     />
                   );
                 else if (!value || !watch("description_html"))
-                  return (
-                    <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" />
-                  );
+                  return <div className="h-32 w-full flex items-center justify-center text-custom-text-200 text-sm" />;
 
                 return (
                   <RichTextEditorWithRef
@@ -353,16 +361,12 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
           </div>
         </div>
         <div className="flex items-center justify-end gap-2 p-4">
-          <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-          <PrimaryButton type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
-            {data
-              ? isSubmitting
-                ? "Updating..."
-                : "Update block"
-              : isSubmitting
-              ? "Adding..."
-              : "Add block"}
-          </PrimaryButton>
+          <Button variant="neutral-primary" onClick={handleClose}>
+            Cancel
+          </Button>
+          <Button variant="primary" type="submit" disabled={watch("name") === ""} loading={isSubmitting}>
+            {data ? (isSubmitting ? "Updating..." : "Update block") : isSubmitting ? "Adding..." : "Add block"}
+          </Button>
         </div>
       </form>
       <GptAssistantModal
@@ -375,9 +379,7 @@ export const CreateUpdateBlockInline: React.FC<Props> = ({
         onResponse={(response) => {
           if (data && handleAiAssistance) {
             handleAiAssistance(response);
-            editorRef.current?.setEditorValue(
-              `${watch("description_html")}<p>${response}</p>` ?? ""
-            );
+            editorRef.current?.setEditorValue(`${watch("description_html")}<p>${response}</p>` ?? "");
           } else {
             setValue("description", {});
             setValue("description_html", `${watch("description_html")}<p>${response}</p>`);
diff --git a/web/components/pages/create-update-page-modal.tsx b/web/components/pages/create-update-page-modal.tsx
index 4835449e1..8a17f2eab 100644
--- a/web/components/pages/create-update-page-modal.tsx
+++ b/web/components/pages/create-update-page-modal.tsx
@@ -7,28 +7,26 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import pagesService from "services/pages.service";
+import { PageService } from "services/page.service";
 // hooks
 import useToast from "hooks/use-toast";
 // components
 import { PageForm } from "./page-form";
 // types
-import { ICurrentUserResponse, IPage } from "types";
+import { IUser, IPage } from "types";
 // fetch-keys
-import {
-  ALL_PAGES_LIST,
-  FAVORITE_PAGES_LIST,
-  MY_PAGES_LIST,
-  RECENT_PAGES_LIST,
-} from "constants/fetch-keys";
+import { ALL_PAGES_LIST, FAVORITE_PAGES_LIST, MY_PAGES_LIST, RECENT_PAGES_LIST } from "constants/fetch-keys";
 
 type Props = {
   isOpen: boolean;
   handleClose: () => void;
   data?: IPage | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+// services
+const pageService = new PageService();
+
 export const CreateUpdatePageModal: React.FC<Props> = ({ isOpen, handleClose, data, user }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -40,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));
@@ -82,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 68c2d6732..ef6f7c909 100644
--- a/web/components/pages/delete-page-modal.tsx
+++ b/web/components/pages/delete-page-modal.tsx
@@ -7,36 +7,29 @@ import { mutate } from "swr";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // services
-import pagesService from "services/pages.service";
+import { PageService } from "services/page.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
-import type { ICurrentUserResponse, IPage } from "types";
+import type { IUser, IPage } from "types";
 // fetch-keys
-import {
-  ALL_PAGES_LIST,
-  FAVORITE_PAGES_LIST,
-  MY_PAGES_LIST,
-  RECENT_PAGES_LIST,
-} from "constants/fetch-keys";
+import { ALL_PAGES_LIST, FAVORITE_PAGES_LIST, MY_PAGES_LIST, RECENT_PAGES_LIST } from "constants/fetch-keys";
 
 type TConfirmPageDeletionProps = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   data?: IPage | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
-export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
-  isOpen,
-  setIsOpen,
-  data,
-  user,
-}) => {
+// services
+const pageService = new PageService();
+
+export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({ isOpen, setIsOpen, data, user }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
@@ -53,7 +46,7 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
     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));
@@ -121,36 +114,29 @@ export const DeletePageModal: React.FC<TConfirmPageDeletionProps> = ({
                 <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"
-                      />
+                      <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"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Delete Page
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete Page-{" "}
-                          <span className="break-words font-medium text-custom-text-100">
-                            {data?.name}
-                          </span>
-                          ? All of the data related to the page will be permanently removed. This
-                          action cannot be undone.
+                          <span className="break-words font-medium text-custom-text-100">{data?.name}</span>? All of the
+                          data related to the page 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}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/pages/page-form.tsx b/web/components/pages/page-form.tsx
index c4c669e1e..c432bb82f 100644
--- a/web/components/pages/page-form.tsx
+++ b/web/components/pages/page-form.tsx
@@ -1,9 +1,7 @@
 import { useEffect } from "react";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // ui
-import { Input, Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
 import { IPage } from "types";
 
@@ -21,9 +19,9 @@ const defaultValues = {
 
 export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, status, data }) => {
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
   } = useForm<IPage>({
     defaultValues,
@@ -47,34 +45,41 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
   return (
     <form onSubmit={handleSubmit(handleCreateUpdatePage)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-          {status ? "Update" : "Create"} Page
-        </h3>
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{status ? "Update" : "Create"} Page</h3>
         <div className="space-y-3">
           <div>
-            <Input
-              id="name"
+            <Controller
+              control={control}
               name="name"
-              type="name"
-              placeholder="Title"
-              className="resize-none text-xl"
-              autoComplete="off"
-              error={errors.name}
-              register={register}
-              validations={{
+              rules={{
                 required: "Title is required",
                 maxLength: {
                   value: 255,
                   message: "Title should be less than 255 characters",
                 },
               }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="name"
+                  name="name"
+                  type="text"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none text-xl w-full"
+                />
+              )}
             />
           </div>
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
+        <Button variant="neutral-primary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
           {status
             ? isSubmitting
               ? "Updating Page..."
@@ -82,7 +87,7 @@ export const PageForm: React.FC<Props> = ({ handleFormSubmit, handleClose, statu
             : isSubmitting
             ? "Creating Page..."
             : "Create Page"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/pages/pages-list/all-pages-list.tsx b/web/components/pages/pages-list/all-pages-list.tsx
index f25d00fd5..22460f734 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/pages.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 2faa4bf72..ef50f296a 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/pages.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,8 +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 c225a0ac5..889ffa3b6 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/pages.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,12 +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 64764533f..176bd6cf5 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/pages.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,12 +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 6944da5c9..9f89fb486 100644
--- a/web/components/pages/pages-list/recent-pages-list.tsx
+++ b/web/components/pages/pages-list/recent-pages-list.tsx
@@ -5,11 +5,12 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import pagesService from "services/pages.service";
+import { PageService } from "services/page.service";
 // components
 import { PagesView } from "components/pages";
 // ui
-import { EmptyState, Loader } from "components/ui";
+import { EmptyState } from "components/common";
+import { Loader } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // images
@@ -22,15 +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);
@@ -43,10 +45,8 @@ export const RecentPagesList: React.FC<TPagesListProps> = ({ viewType }) => {
             if (pages[key].length === 0) return null;
 
             return (
-              <div key={key} className="h-full overflow-hidden pb-9">
-                <h2 className="text-xl font-semibold capitalize mb-2">
-                  {replaceUnderscoreIfSnakeCase(key)}
-                </h2>
+              <div key={key} className="h-full overflow-hidden">
+                <h2 className="text-xl font-semibold capitalize mb-2">{replaceUnderscoreIfSnakeCase(key)}</h2>
                 <PagesView pages={pages[key as keyof RecentPagesResponse]} viewType={viewType} />
               </div>
             );
diff --git a/web/components/pages/pages-view.tsx b/web/components/pages/pages-view.tsx
index 8178460e1..942b68ba8 100644
--- a/web/components/pages/pages-view.tsx
+++ b/web/components/pages/pages-view.tsx
@@ -4,20 +4,16 @@ import useSWR, { mutate } from "swr";
 import { useRouter } from "next/router";
 
 // services
-import pagesService from "services/pages.service";
-import projectService from "services/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";
+import { CreateUpdatePageModal, DeletePageModal, SinglePageDetailedItem, SinglePageListItem } from "components/pages";
 // ui
-import { EmptyState, Loader } from "components/ui";
+import { EmptyState } from "components/common";
+import { Loader } from "@plane/ui";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // images
@@ -37,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);
@@ -91,13 +91,9 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
         }),
       false
     );
-    mutate<IPage[]>(
-      FAVORITE_PAGES_LIST(projectId.toString()),
-      (prevData) => [page, ...(prevData ?? [])],
-      false
-    );
+    mutate<IPage[]>(FAVORITE_PAGES_LIST(projectId.toString()), (prevData) => [page, ...(prevData ?? [])], false);
 
-    pagesService
+    pageService
       .addPageToFavorites(workspaceSlug.toString(), projectId.toString(), {
         page: page.id,
       })
@@ -147,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()));
@@ -185,11 +181,9 @@ export const PagesView: React.FC<Props> = ({ pages, viewType }) => {
       false
     );
 
-    pagesService
-      .patchPage(workspaceSlug.toString(), projectId.toString(), page.id, formData, user)
-      .then(() => {
-        mutate(RECENT_PAGES_LIST(projectId.toString()));
-      });
+    pageService.patchPage(workspaceSlug.toString(), projectId.toString(), page.id, formData, user).then(() => {
+      mutate(RECENT_PAGES_LIST(projectId.toString()));
+    });
   };
 
   return (
diff --git a/web/components/pages/single-page-block.tsx b/web/components/pages/single-page-block.tsx
index e37168d49..ffad1a200 100644
--- a/web/components/pages/single-page-block.tsx
+++ b/web/components/pages/single-page-block.tsx
@@ -1,18 +1,14 @@
 import React, { useEffect, useState, useRef } from "react";
-
 import { useRouter } from "next/router";
 import Link from "next/link";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { useForm } from "react-hook-form";
-// react-beautiful-dnd
 import { Draggable } from "react-beautiful-dnd";
 // services
-import pagesService from "services/pages.service";
-import issuesService from "services/issues.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";
@@ -21,7 +17,8 @@ import { GptAssistantModal } from "components/core";
 import { CreateUpdateBlockInline } from "components/pages";
 import { RichTextEditor } from "@plane/rich-text-editor";
 // ui
-import { CustomMenu, TextArea } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { TextArea } from "@plane/ui";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
 import { ArrowPathIcon, LinkIcon } from "@heroicons/react/20/solid";
@@ -36,26 +33,24 @@ import {
 // helpers
 import { copyTextToClipboard } from "helpers/string.helper";
 // types
-import { ICurrentUserResponse, IIssue, IPageBlock, IProject } from "types";
+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;
   projectDetails: IProject | undefined;
   showBlockDetails: boolean;
   index: number;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
-export const SinglePageBlock: React.FC<Props> = ({
-  block,
-  projectDetails,
-  showBlockDetails,
-  index,
-  user,
-}) => {
+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);
   const [createBlockForm, setCreateBlockForm] = useState(false);
   const [iAmFeelingLucky, setIAmFeelingLucky] = useState(false);
@@ -70,7 +65,7 @@ export const SinglePageBlock: React.FC<Props> = ({
 
   const { setToastAlert } = useToast();
 
-  const { handleSubmit, watch, reset, setValue, register } = useForm<IPageBlock>({
+  const { handleSubmit, watch, reset, setValue } = useForm<IPageBlock>({
     defaultValues: {
       name: "",
       description: {},
@@ -96,7 +91,7 @@ export const SinglePageBlock: React.FC<Props> = ({
       false
     );
 
-    await pagesService
+    await pageService
       .patchPageBlock(
         workspaceSlug as string,
         projectId as string,
@@ -112,7 +107,7 @@ export const SinglePageBlock: React.FC<Props> = ({
       .then((res) => {
         mutate(PAGE_BLOCKS_LIST(pageId as string));
         if (block.issue && block.sync)
-          issuesService
+          issueService
             .patchIssue(
               workspaceSlug as string,
               projectId as string,
@@ -131,14 +126,8 @@ export const SinglePageBlock: React.FC<Props> = ({
   const pushBlockIntoIssues = async () => {
     if (!workspaceSlug || !projectId || !pageId) return;
 
-    await pagesService
-      .convertPageBlockToIssue(
-        workspaceSlug as string,
-        projectId as string,
-        pageId as string,
-        block.id,
-        user
-      )
+    await pageService
+      .convertPageBlockToIssue(workspaceSlug as string, projectId as string, pageId as string, block.id, user)
       .then((res: IIssue) => {
         mutate<IPageBlock[]>(
           PAGE_BLOCKS_LIST(pageId as string),
@@ -157,7 +146,7 @@ export const SinglePageBlock: React.FC<Props> = ({
           message: "Page block converted to issue successfully.",
         });
       })
-      .catch((res) => {
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
@@ -175,14 +164,8 @@ export const SinglePageBlock: React.FC<Props> = ({
       false
     );
 
-    await pagesService
-      .deletePageBlock(
-        workspaceSlug as string,
-        projectId as string,
-        pageId as string,
-        block.id,
-        user
-      )
+    await pageService
+      .deletePageBlock(workspaceSlug as string, projectId as string, pageId as string, block.id, user)
       .catch(() => {
         setToastAlert({
           type: "error",
@@ -222,8 +205,7 @@ export const SinglePageBlock: React.FC<Props> = ({
           setToastAlert({
             type: "error",
             title: "Error!",
-            message:
-              "You have reached the maximum number of requests of 50 requests per month per user.",
+            message: "You have reached the maximum number of requests of 50 requests per month per user.",
           });
         else
           setToastAlert({
@@ -271,7 +253,7 @@ export const SinglePageBlock: React.FC<Props> = ({
       false
     );
 
-    pagesService.patchPageBlock(
+    pageService.patchPageBlock(
       workspaceSlug as string,
       projectId as string,
       pageId as string,
@@ -284,12 +266,9 @@ export const SinglePageBlock: React.FC<Props> = ({
   };
 
   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/${projectId}/issues/${block.issue}`
-    ).then(() => {
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -344,11 +323,7 @@ export const SinglePageBlock: React.FC<Props> = ({
               >
                 {block.issue && block.sync && (
                   <div className="flex flex-shrink-0 cursor-default items-center gap-1 rounded py-1 px-1.5 text-xs">
-                    {isSyncing ? (
-                      <ArrowPathIcon className="h-3 w-3 animate-spin" />
-                    ) : (
-                      <CheckIcon className="h-3 w-3" />
-                    )}
+                    {isSyncing ? <ArrowPathIcon className="h-3 w-3 animate-spin" /> : <CheckIcon className="h-3 w-3" />}
                     {isSyncing ? "Syncing..." : "Synced"}
                   </div>
                 )}
@@ -432,9 +407,7 @@ export const SinglePageBlock: React.FC<Props> = ({
                   <div className="flex items-center">
                     {block.issue && (
                       <div className="mr-1.5 flex">
-                        <Link
-                          href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}
-                        >
+                        <Link href={`/${workspaceSlug}/projects/${projectId}/issues/${block.issue}`}>
                           <a className="flex h-6 flex-shrink-0 items-center gap-1 rounded bg-custom-background-80 px-1.5 py-1 text-xs">
                             <LayerDiagonalIcon height="16" width="16" />
                             {projectDetails?.identifier}-{block.issue_detail?.sequence_id}
@@ -443,10 +416,11 @@ export const SinglePageBlock: React.FC<Props> = ({
                       </div>
                     )}
                     <TextArea
+                      id="blockName"
                       name="blockName"
                       value={block.name}
-                      className="min-h-[20px] block w-full resize-none overflow-hidden border-none bg-transparent text-sm text-custom-text-100"
-                      noPadding
+                      placeholder="Title"
+                      className="min-h-[20px] block w-full resize-none overflow-hidden border-none bg-transparent text-sm text-custom-text-100 !p-0"
                     />
                   </div>
 
diff --git a/web/components/pages/single-page-detailed-item.tsx b/web/components/pages/single-page-detailed-item.tsx
index eca4df9f1..cbb094e29 100644
--- a/web/components/pages/single-page-detailed-item.tsx
+++ b/web/components/pages/single-page-detailed-item.tsx
@@ -7,24 +7,14 @@ import { useRouter } from "next/router";
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu, Tooltip } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
-import {
-  LinkIcon,
-  LockClosedIcon,
-  LockOpenIcon,
-  PencilIcon,
-  StarIcon,
-  TrashIcon,
-} from "@heroicons/react/24/outline";
+import { LinkIcon, LockClosedIcon, LockOpenIcon, PencilIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { ExclamationIcon } from "components/icons";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-import {
-  render24HourFormatTime,
-  renderShortDate,
-  renderLongDateFormat,
-} from "helpers/date-time.helper";
+import { render24HourFormatTime, renderShortDate, renderLongDateFormat } from "helpers/date-time.helper";
 // types
 import { IPage, IProjectMember } from "types";
 
@@ -55,11 +45,8 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
   const { setToastAlert } = useToast();
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`
-    ).then(() => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -81,16 +68,13 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                     key={label.id}
                     className="group flex items-center gap-1 rounded-2xl border border-custom-border-200 px-2 py-0.5 text-xs"
                     style={{
-                      backgroundColor: `${
-                        label?.color && label.color !== "" ? label.color : "#000000"
-                      }20`,
+                      backgroundColor: `${label?.color && label.color !== "" ? label.color : "#000000"}20`,
                     }}
                   >
                     <span
                       className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
                       style={{
-                        backgroundColor:
-                          label?.color && label.color !== "" ? label.color : "#000000",
+                        backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
                       }}
                     />
                     {label.name}
@@ -105,9 +89,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
                   ` ${new Date(page.updated_at).getHours() < 12 ? "am" : "pm"}`
                 } on ${renderShortDate(page.updated_at)}`}
               >
-                <p className="text-sm text-custom-text-200">
-                  {render24HourFormatTime(page.updated_at)}
-                </p>
+                <p className="text-sm text-custom-text-200">{render24HourFormatTime(page.updated_at)}</p>
               </Tooltip>
               {page.is_favorite ? (
                 <button
@@ -161,8 +143,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
               <Tooltip
                 position="top-right"
                 tooltipContent={`Created by ${
-                  people?.find((person) => person.member.id === page.created_by)?.member
-                    .display_name ?? ""
+                  people?.find((person) => person.member.id === page.created_by)?.member.display_name ?? ""
                 } on ${renderLongDateFormat(`${page.created_at}`)}`}
               >
                 <span>
@@ -210,9 +191,7 @@ export const SinglePageDetailedItem: React.FC<TSingleStatProps> = ({
             </div>
           </div>
           <div className="relative mt-2 space-y-2 text-sm text-custom-text-200">
-            {page.blocks.length > 0
-              ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>)
-              : null}
+            {page.blocks.length > 0 ? page.blocks.slice(0, 3).map((block) => <h4>{block.name}</h4>) : null}
           </div>
         </a>
       </Link>
diff --git a/web/components/pages/single-page-list-item.tsx b/web/components/pages/single-page-list-item.tsx
index 44a6ab6a9..1dd31c29a 100644
--- a/web/components/pages/single-page-list-item.tsx
+++ b/web/components/pages/single-page-list-item.tsx
@@ -7,7 +7,8 @@ import { useRouter } from "next/router";
 import useUser from "hooks/use-user";
 import useToast from "hooks/use-toast";
 // ui
-import { CustomMenu, Tooltip } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import {
   DocumentTextIcon,
@@ -21,11 +22,7 @@ import {
 import { ExclamationIcon } from "components/icons";
 // helpers
 import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-import {
-  renderLongDateFormat,
-  renderShortDate,
-  render24HourFormatTime,
-} from "helpers/date-time.helper";
+import { renderLongDateFormat, renderShortDate, render24HourFormatTime } from "helpers/date-time.helper";
 // types
 import { IPage, IProjectMember } from "types";
 
@@ -56,11 +53,8 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
   const { setToastAlert } = useToast();
 
   const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-    copyTextToClipboard(
-      `${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`
-    ).then(() => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${page.id}`).then(() => {
       setToastAlert({
         type: "success",
         title: "Link Copied!",
@@ -77,9 +71,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
             <div className="flex items-center justify-between">
               <div className="flex flex-wrap items-center gap-2">
                 <DocumentTextIcon className="h-4 w-4" />
-                <p className="mr-2 truncate text-sm text-custom-text-100">
-                  {truncateText(page.name, 75)}
-                </p>
+                <p className="mr-2 truncate text-sm text-custom-text-100">{truncateText(page.name, 75)}</p>
                 {page.label_details.length > 0 &&
                   page.label_details.map((label) => (
                     <div
@@ -102,13 +94,11 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
               <div className="ml-2 flex flex-shrink-0">
                 <div className="flex items-center gap-2">
                   <Tooltip
-                    tooltipContent={`Last updated at ${render24HourFormatTime(
+                    tooltipContent={`Last updated at ${render24HourFormatTime(page.updated_at)} on ${renderShortDate(
                       page.updated_at
-                    )} on ${renderShortDate(page.updated_at)}`}
+                    )}`}
                   >
-                    <p className="text-sm text-custom-text-200">
-                      {render24HourFormatTime(page.updated_at)}
-                    </p>
+                    <p className="text-sm text-custom-text-200">{render24HourFormatTime(page.updated_at)}</p>
                   </Tooltip>
                   {page.is_favorite ? (
                     <button
@@ -160,8 +150,7 @@ export const SinglePageListItem: React.FC<TSingleStatProps> = ({
                   <Tooltip
                     position="top-right"
                     tooltipContent={`Created by ${
-                      people?.find((person) => person.member.id === page.created_by)?.member
-                        .display_name ?? ""
+                      people?.find((person) => person.member.id === page.created_by)?.member.display_name ?? ""
                     } on ${renderLongDateFormat(`${page.created_at}`)}`}
                   >
                     <span>
diff --git a/web/components/profile/overview/activity.tsx b/web/components/profile/overview/activity.tsx
index 045812363..9a4973aaa 100644
--- a/web/components/profile/overview/activity.tsx
+++ b/web/components/profile/overview/activity.tsx
@@ -3,11 +3,12 @@ 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
-import { ProfileEmptyState, Icon, Loader } from "components/ui";
+import { ProfileEmptyState, Icon } from "components/ui";
+import { Loader } from "@plane/ui";
 // image
 import recentActivityEmptyState from "public/empty-state/recent_activity.svg";
 // helpers
@@ -15,14 +16,15 @@ 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;
 
   const { data: userProfileActivity } = useSWR(
-    workspaceSlug && userId
-      ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString())
-      : null,
+    workspaceSlug && userId ? USER_PROFILE_ACTIVITY(workspaceSlug.toString(), userId.toString()) : null,
     workspaceSlug && userId
       ? () => userService.getUserProfileActivity(workspaceSlug.toString(), userId.toString())
       : null
@@ -54,9 +56,7 @@ export const ProfileActivity = () => {
                   </div>
                   <div className="-mt-1 w-4/5 break-words">
                     <p className="text-sm text-custom-text-200">
-                      <span className="font-medium text-custom-text-100">
-                        {activity.actor_detail.display_name}{" "}
-                      </span>
+                      <span className="font-medium text-custom-text-100">{activity.actor_detail.display_name} </span>
                       {activity.field ? (
                         <ActivityMessage activity={activity} showIssue />
                       ) : (
diff --git a/web/components/profile/overview/priority-distribution.tsx b/web/components/profile/overview/priority-distribution.tsx
index d72985285..de88cf517 100644
--- a/web/components/profile/overview/priority-distribution.tsx
+++ b/web/components/profile/overview/priority-distribution.tsx
@@ -1,5 +1,6 @@
 // ui
-import { BarGraph, ProfileEmptyState, Loader } from "components/ui";
+import { BarGraph, ProfileEmptyState } from "components/ui";
+import { Loader } from "@plane/ui";
 // image
 import emptyBarGraph from "public/empty-state/empty_bar_graph.svg";
 // helpers
diff --git a/web/components/profile/overview/stats.tsx b/web/components/profile/overview/stats.tsx
index 0277ac5b3..f6ec73778 100644
--- a/web/components/profile/overview/stats.tsx
+++ b/web/components/profile/overview/stats.tsx
@@ -2,7 +2,8 @@ import { useRouter } from "next/router";
 import Link from "next/link";
 
 // ui
-import { Icon, Loader } from "components/ui";
+import { Icon } from "components/ui";
+import { Loader } from "@plane/ui";
 // types
 import { IUserProfileData } from "types";
 
diff --git a/web/components/profile/profile-issues-view-options.tsx b/web/components/profile/profile-issues-view-options.tsx
index 40b27ec2c..cc5a93062 100644
--- a/web/components/profile/profile-issues-view-options.tsx
+++ b/web/components/profile/profile-issues-view-options.tsx
@@ -10,7 +10,8 @@ import useEstimateOption from "hooks/use-estimate-option";
 // components
 import { MyIssuesSelectFilters } from "components/issues";
 // ui
-import { CustomMenu, ToggleSwitch, Tooltip } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { ToggleSwitch, Tooltip } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import { FormatListBulletedOutlined, GridViewOutlined } from "@mui/icons-material";
@@ -18,11 +19,11 @@ import { FormatListBulletedOutlined, GridViewOutlined } from "@mui/icons-materia
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 import { checkIfArraysHaveSameElements } from "helpers/array.helper";
 // types
-import { Properties, TIssueViewOptions } from "types";
+import { Properties, TIssueLayouts } from "types";
 // constants
-import { GROUP_BY_OPTIONS, ORDER_BY_OPTIONS, FILTER_ISSUE_OPTIONS } from "constants/issue";
+import { ISSUE_GROUP_BY_OPTIONS, ISSUE_ORDER_BY_OPTIONS, ISSUE_FILTER_OPTIONS } from "constants/issue";
 
-const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
+const issueViewOptions: { type: TIssueLayouts; Icon: any }[] = [
   {
     type: "list",
     Icon: FormatListBulletedOutlined,
@@ -36,14 +37,11 @@ const issueViewOptions: { type: TIssueViewOptions; Icon: any }[] = [
 export const ProfileIssuesViewOptions: React.FC = () => {
   const router = useRouter();
   const { workspaceSlug, userId } = router.query;
-  const {
-    displayFilters,
-    setDisplayFilters,
-    filters,
-    displayProperties,
-    setProperties,
-    setFilters,
-  } = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
+
+  const { displayFilters, setDisplayFilters, filters, displayProperties, setProperties, setFilters } = useProfileIssues(
+    workspaceSlug?.toString(),
+    userId?.toString()
+  );
 
   const { isEstimateActive } = useEstimateOption();
 
@@ -60,9 +58,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
         {issueViewOptions.map((option) => (
           <Tooltip
             key={option.type}
-            tooltipContent={
-              <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</span>
-            }
+            tooltipContent={<span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</span>}
             position="bottom"
           >
             <button
@@ -100,9 +96,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
 
             if (valueExists)
               setFilters({
-                [option.key]: ((filters[key] ?? []) as any[])?.filter(
-                  (val) => val !== option.value
-                ),
+                [option.key]: ((filters[key] ?? []) as any[])?.filter((val) => val !== option.value),
               });
             else
               setFilters({
@@ -118,9 +112,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
           <>
             <Popover.Button
               className={`group flex items-center gap-2 rounded-md border border-custom-border-200 bg-transparent px-3 py-1.5 text-xs hover:bg-custom-sidebar-background-90 hover:text-custom-sidebar-text-100 focus:outline-none duration-300 ${
-                open
-                  ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100"
-                  : "text-custom-sidebar-text-200"
+                open ? "bg-custom-sidebar-background-90 text-custom-sidebar-text-100" : "text-custom-sidebar-text-200"
               }`}
             >
               Display
@@ -139,96 +131,83 @@ export const ProfileIssuesViewOptions: React.FC = () => {
               <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
                 <div className="relative divide-y-2 divide-custom-border-200">
                   <div className="space-y-4 pb-3 text-xs">
-                    {displayFilters?.layout !== "calendar" &&
-                      displayFilters?.layout !== "spreadsheet" && (
-                        <>
-                          <div className="flex items-center justify-between">
-                            <h4 className="text-custom-text-200">Group by</h4>
-                            <div className="w-28">
-                              <CustomMenu
-                                label={
-                                  displayFilters?.group_by === "project"
-                                    ? "Project"
-                                    : GROUP_BY_OPTIONS.find(
-                                        (option) => option.key === displayFilters?.group_by
-                                      )?.name ?? "Select"
-                                }
-                                className="!w-full"
-                                buttonClassName="w-full"
-                              >
-                                {GROUP_BY_OPTIONS.map((option) => {
-                                  if (displayFilters?.layout === "kanban" && option.key === null)
-                                    return null;
-                                  if (
-                                    option.key === "state" ||
-                                    option.key === "created_by" ||
-                                    option.key === "assignees"
-                                  )
-                                    return null;
+                    {displayFilters?.layout !== "calendar" && displayFilters?.layout !== "spreadsheet" && (
+                      <>
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-custom-text-200">Group by</h4>
+                          <div className="w-28">
+                            <CustomMenu
+                              label={
+                                displayFilters?.group_by === "project"
+                                  ? "Project"
+                                  : ISSUE_GROUP_BY_OPTIONS.find((option) => option.key === displayFilters?.group_by)
+                                      ?.title ?? "Select"
+                              }
+                              className="!w-full"
+                              buttonClassName="w-full"
+                            >
+                              {ISSUE_GROUP_BY_OPTIONS.map((option) => {
+                                if (displayFilters?.layout === "kanban" && option.key === null) return null;
+                                if (option.key === "state" || option.key === "created_by" || option.key === "assignees")
+                                  return null;
 
-                                  return (
-                                    <CustomMenu.MenuItem
-                                      key={option.key}
-                                      onClick={() => setDisplayFilters({ group_by: option.key })}
-                                    >
-                                      {option.name}
-                                    </CustomMenu.MenuItem>
-                                  );
-                                })}
-                              </CustomMenu>
-                            </div>
+                                return (
+                                  <CustomMenu.MenuItem
+                                    key={option.key}
+                                    onClick={() => setDisplayFilters({ group_by: option.key })}
+                                  >
+                                    {option.title}
+                                  </CustomMenu.MenuItem>
+                                );
+                              })}
+                            </CustomMenu>
                           </div>
-                          <div className="flex items-center justify-between">
-                            <h4 className="text-custom-text-200">Order by</h4>
-                            <div className="w-28">
-                              <CustomMenu
-                                label={
-                                  ORDER_BY_OPTIONS.find(
-                                    (option) => option.key === displayFilters?.order_by
-                                  )?.name ?? "Select"
-                                }
-                                className="!w-full"
-                                buttonClassName="w-full"
-                              >
-                                {ORDER_BY_OPTIONS.map((option) => {
-                                  if (
-                                    displayFilters?.group_by === "priority" &&
-                                    option.key === "priority"
-                                  )
-                                    return null;
-                                  if (option.key === "sort_order") return null;
+                        </div>
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-custom-text-200">Order by</h4>
+                          <div className="w-28">
+                            <CustomMenu
+                              label={
+                                ISSUE_ORDER_BY_OPTIONS.find((option) => option.key === displayFilters?.order_by)
+                                  ?.title ?? "Select"
+                              }
+                              className="!w-full"
+                              buttonClassName="w-full"
+                            >
+                              {ISSUE_ORDER_BY_OPTIONS.map((option) => {
+                                if (displayFilters?.group_by === "priority" && option.key === "priority") return null;
+                                if (option.key === "sort_order") return null;
 
-                                  return (
-                                    <CustomMenu.MenuItem
-                                      key={option.key}
-                                      onClick={() => {
-                                        setDisplayFilters({ order_by: option.key });
-                                      }}
-                                    >
-                                      {option.name}
-                                    </CustomMenu.MenuItem>
-                                  );
-                                })}
-                              </CustomMenu>
-                            </div>
+                                return (
+                                  <CustomMenu.MenuItem
+                                    key={option.key}
+                                    onClick={() => {
+                                      setDisplayFilters({ order_by: option.key });
+                                    }}
+                                  >
+                                    {option.title}
+                                  </CustomMenu.MenuItem>
+                                );
+                              })}
+                            </CustomMenu>
                           </div>
-                        </>
-                      )}
+                        </div>
+                      </>
+                    )}
                     <div className="flex items-center justify-between">
                       <h4 className="text-custom-text-200">Issue type</h4>
                       <div className="w-28">
                         <CustomMenu
                           label={
                             <span className="truncate">
-                              {FILTER_ISSUE_OPTIONS.find(
-                                (option) => option.key === displayFilters?.type
-                              )?.name ?? "Select"}
+                              {ISSUE_FILTER_OPTIONS.find((option) => option.key === displayFilters?.type)?.title ??
+                                "Select"}
                             </span>
                           }
                           className="!w-full"
                           buttonClassName="w-full"
                         >
-                          {FILTER_ISSUE_OPTIONS.map((option) => (
+                          {ISSUE_FILTER_OPTIONS.map((option) => (
                             <CustomMenu.MenuItem
                               key={option.key}
                               onClick={() =>
@@ -237,31 +216,30 @@ export const ProfileIssuesViewOptions: React.FC = () => {
                                 })
                               }
                             >
-                              {option.name}
+                              {option.title}
                             </CustomMenu.MenuItem>
                           ))}
                         </CustomMenu>
                       </div>
                     </div>
 
-                    {displayFilters?.layout !== "calendar" &&
-                      displayFilters?.layout !== "spreadsheet" && (
-                        <>
-                          <div className="flex items-center justify-between">
-                            <h4 className="text-custom-text-200">Show empty groups</h4>
-                            <div className="w-28">
-                              <ToggleSwitch
-                                value={displayFilters?.show_empty_groups ?? true}
-                                onChange={() =>
-                                  setDisplayFilters({
-                                    show_empty_groups: !displayFilters?.show_empty_groups,
-                                  })
-                                }
-                              />
-                            </div>
+                    {displayFilters?.layout !== "calendar" && displayFilters?.layout !== "spreadsheet" && (
+                      <>
+                        <div className="flex items-center justify-between">
+                          <h4 className="text-custom-text-200">Show empty states</h4>
+                          <div className="w-28">
+                            <ToggleSwitch
+                              value={displayFilters?.show_empty_groups ?? true}
+                              onChange={() =>
+                                setDisplayFilters({
+                                  show_empty_groups: !displayFilters?.show_empty_groups,
+                                })
+                              }
+                            />
                           </div>
-                        </>
-                      )}
+                        </div>
+                      </>
+                    )}
                   </div>
 
                   <div className="space-y-2 py-3">
@@ -273,9 +251,7 @@ export const ProfileIssuesViewOptions: React.FC = () => {
 
                           if (
                             displayFilters?.layout === "spreadsheet" &&
-                            (key === "attachment_count" ||
-                              key === "link" ||
-                              key === "sub_issue_count")
+                            (key === "attachment_count" || key === "link" || key === "sub_issue_count")
                           )
                             return null;
 
diff --git a/web/components/profile/profile-issues-view.tsx b/web/components/profile/profile-issues-view.tsx
index 9d6a53ffe..6456b8f84 100644
--- a/web/components/profile/profile-issues-view.tsx
+++ b/web/components/profile/profile-issues-view.tsx
@@ -1,19 +1,15 @@
 import { useCallback, useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
-// react-beautiful-dnd
 import { DropResult } from "react-beautiful-dnd";
 // services
-import issuesService from "services/issues.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";
 // components
-import { AllViews, FiltersList } from "components/core";
+import { FiltersList } from "components/core";
 import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
@@ -22,6 +18,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);
@@ -31,9 +32,7 @@ export const ProfileIssuesView = () => {
 
   // update issue modal
   const [editIssueModal, setEditIssueModal] = useState(false);
-  const [issueToEdit, setIssueToEdit] = useState<
-    (IIssue & { actionType: "edit" | "delete" }) | undefined
-  >(undefined);
+  const [issueToEdit, setIssueToEdit] = useState<(IIssue & { actionType: "edit" | "delete" }) | undefined>(undefined);
 
   // delete issue modal
   const [deleteIssueModal, setDeleteIssueModal] = useState(false);
@@ -59,21 +58,16 @@ export const ProfileIssuesView = () => {
   } = useProfileIssues(workspaceSlug?.toString(), userId?.toString());
 
   const { data: profileData } = useSWR(
+    workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
     workspaceSlug && userId
-      ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString())
-      : null,
-    workspaceSlug && userId
-      ? () =>
-          userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
+      ? () => userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
       : null
   );
 
   const { data: labels } = useSWR(
+    workspaceSlug && (filters?.labels ?? []).length > 0 ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
     workspaceSlug && (filters?.labels ?? []).length > 0
-      ? WORKSPACE_LABELS(workspaceSlug.toString())
-      : null,
-    workspaceSlug && (filters?.labels ?? []).length > 0
-      ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString())
+      ? () => issueLabelService.getWorkspaceIssueLabels(workspaceSlug.toString())
       : null
   );
 
@@ -89,13 +83,7 @@ export const ProfileIssuesView = () => {
     async (result: DropResult) => {
       setTrashBox(false);
 
-      if (
-        !result.destination ||
-        !workspaceSlug ||
-        !groupedIssues ||
-        displayFilters?.group_by !== "priority"
-      )
-        return;
+      if (!result.destination || !workspaceSlug || !groupedIssues || displayFilters?.group_by !== "priority") return;
 
       const { source, destination } = result;
 
@@ -124,15 +112,12 @@ export const ProfileIssuesView = () => {
           return {
             ...prevData,
             [sourceGroup]: orderArrayBy(sourceGroupArray, displayFilters.order_by ?? "-created_at"),
-            [destinationGroup]: orderArrayBy(
-              destinationGroupArray,
-              displayFilters.order_by ?? "-created_at"
-            ),
+            [destinationGroup]: orderArrayBy(destinationGroupArray, displayFilters.order_by ?? "-created_at"),
           };
         }, false);
 
         // patch request
-        issuesService
+        issueService
           .patchIssue(
             workspaceSlug as string,
             draggedItem.project,
@@ -217,18 +202,13 @@ export const ProfileIssuesView = () => {
     (key) => filtersToDisplay[key as keyof IIssueFilterOptions] === null
   );
   const areFiltersApplied =
-    Object.keys(filtersToDisplay).length > 0 &&
-    nullFilters.length !== Object.keys(filtersToDisplay).length;
+    Object.keys(filtersToDisplay).length > 0 && nullFilters.length !== Object.keys(filtersToDisplay).length;
 
   const isSubscribedIssuesRoute = router.pathname.includes("subscribed");
   const isMySubscribedIssues =
-    (filters.subscriber &&
-      filters.subscriber.length > 0 &&
-      router.pathname.includes("my-issues")) ??
-    false;
+    (filters.subscriber && filters.subscriber.length > 0 && router.pathname.includes("my-issues")) ?? false;
 
-  const disableAddIssueOption =
-    isSubscribedIssuesRoute || isMySubscribedIssues || user?.id !== userId;
+  const disableAddIssueOption = isSubscribedIssuesRoute || isMySubscribedIssues || user?.id !== userId;
 
   return (
     <>
@@ -282,7 +262,7 @@ export const ProfileIssuesView = () => {
           {<div className="mt-3 border-t border-custom-border-200" />}
         </>
       )}
-      <AllViews
+      {/* <AllViews
         addIssueToDate={addIssueToDate}
         addIssueToGroup={addIssueToGroup}
         disableUserActions={false}
@@ -309,7 +289,7 @@ export const ProfileIssuesView = () => {
           params,
           properties: displayProperties,
         }}
-      />
+      /> */}
     </>
   );
 };
diff --git a/web/components/profile/sidebar.tsx b/web/components/profile/sidebar.tsx
index 59cc5528b..928417486 100644
--- a/web/components/profile/sidebar.tsx
+++ b/web/components/profile/sidebar.tsx
@@ -6,11 +6,12 @@ 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
-import { Icon, Loader, Tooltip } from "components/ui";
+import { Icon } from "components/ui";
+import { Loader, Tooltip } from "@plane/ui";
 // icons
 import { EditOutlined } from "@mui/icons-material";
 // helpers
@@ -19,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;
@@ -26,12 +30,9 @@ export const ProfileSidebar = () => {
   const { user } = useUser();
 
   const { data: userProjectsData } = useSWR(
+    workspaceSlug && userId ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString()) : null,
     workspaceSlug && userId
-      ? USER_PROFILE_PROJECT_SEGREGATION(workspaceSlug.toString(), userId.toString())
-      : null,
-    workspaceSlug && userId
-      ? () =>
-          userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
+      ? () => userService.getUserProfileProjectsSegregation(workspaceSlug.toString(), userId.toString())
       : null
   );
 
@@ -54,8 +55,7 @@ export const ProfileSidebar = () => {
       label: "Timezone",
       value: (
         <span>
-          {timeString}{" "}
-          <span className="text-custom-text-200">{userProjectsData?.user_data.user_timezone}</span>
+          {timeString} <span className="text-custom-text-200">{userProjectsData?.user_data.user_timezone}</span>
         </span>
       ),
     },
@@ -81,8 +81,7 @@ export const ProfileSidebar = () => {
             )}
             <img
               src={
-                userProjectsData.user_data.cover_image ??
-                "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
+                userProjectsData.user_data.cover_image ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
               }
               alt={userProjectsData.user_data.display_name}
               className="h-32 w-full object-cover"
@@ -106,9 +105,7 @@ export const ProfileSidebar = () => {
               <h4 className="text-lg font-semibold">
                 {userProjectsData.user_data.first_name} {userProjectsData.user_data.last_name}
               </h4>
-              <h6 className="text-custom-text-200 text-sm">
-                ({userProjectsData.user_data.display_name})
-              </h6>
+              <h6 className="text-custom-text-200 text-sm">({userProjectsData.user_data.display_name})</h6>
             </div>
             <div className="mt-6 space-y-5">
               {userDetails.map((detail) => (
@@ -121,10 +118,7 @@ export const ProfileSidebar = () => {
             <div className="mt-9 divide-y divide-custom-border-100">
               {userProjectsData.project_data.map((project, index) => {
                 const totalIssues =
-                  project.created_issues +
-                  project.assigned_issues +
-                  project.pending_issues +
-                  project.completed_issues;
+                  project.created_issues + project.assigned_issues + project.pending_issues + project.completed_issues;
 
                 const completedIssuePercentage =
                   project.assigned_issues === 0
@@ -132,11 +126,7 @@ export const ProfileSidebar = () => {
                     : Math.round((project.completed_issues / project.assigned_issues) * 100);
 
                 return (
-                  <Disclosure
-                    key={project.id}
-                    as="div"
-                    className={`${index === 0 ? "pb-3" : "py-3"}`}
-                  >
+                  <Disclosure key={project.id} as="div" className={`${index === 0 ? "pb-3" : "py-3"}`}>
                     {({ open }) => (
                       <div className="w-full">
                         <Disclosure.Button className="flex items-center justify-between gap-2 w-full">
@@ -154,9 +144,7 @@ export const ProfileSidebar = () => {
                                 {project?.name.charAt(0)}
                               </div>
                             )}
-                            <div className="text-sm font-medium truncate break-words">
-                              {project.name}
-                            </div>
+                            <div className="text-sm font-medium truncate break-words">{project.name}</div>
                           </div>
                           <div className="flex-shrink-0 flex items-center gap-2">
                             {project.assigned_issues > 0 && (
diff --git a/web/components/project/card-list.tsx b/web/components/project/card-list.tsx
new file mode 100644
index 000000000..681c96afe
--- /dev/null
+++ b/web/components/project/card-list.tsx
@@ -0,0 +1,69 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ProjectCard } from "components/project";
+import { EmptyState } from "components/common";
+import { Loader } from "@plane/ui";
+// images
+import emptyProject from "public/empty-state/project.svg";
+// icons
+import { Plus } from "lucide-react";
+
+export interface IProjectCardList {
+  workspaceSlug: string;
+}
+
+export const ProjectCardList: FC<IProjectCardList> = observer((props) => {
+  const { workspaceSlug } = props;
+  // store
+  const { project: projectStore } = useMobxStore();
+
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
+
+  console.log("projects", projects);
+
+  if (!projects) {
+    return (
+      <Loader className="grid grid-cols-3 gap-4">
+        <Loader.Item height="100px" />
+        <Loader.Item height="100px" />
+        <Loader.Item height="100px" />
+        <Loader.Item height="100px" />
+        <Loader.Item height="100px" />
+        <Loader.Item height="100px" />
+      </Loader>
+    );
+  }
+
+  return (
+    <>
+      {projects.length > 0 ? (
+        <div className="h-full p-8 overflow-y-auto">
+          <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
+            {projectStore.searchedProjects.map((project) => (
+              <ProjectCard key={project.id} project={project} />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <EmptyState
+          image={emptyProject}
+          title="No projects yet"
+          description="Get started by creating your first project"
+          primaryButton={{
+            icon: <Plus className="h-4 w-4" />,
+            text: "New Project",
+            onClick: () => {
+              const e = new KeyboardEvent("keydown", {
+                key: "p",
+              });
+              document.dispatchEvent(e);
+            },
+          }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/project/card.tsx b/web/components/project/card.tsx
new file mode 100644
index 000000000..57e27d060
--- /dev/null
+++ b/web/components/project/card.tsx
@@ -0,0 +1,216 @@
+import React, { useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// icons
+import { CalendarDays, Link2Icon, Pencil, Plus, Star, Trash2 } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// ui
+import { Tooltip } from "@plane/ui";
+// helpers
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import type { IProject } from "types";
+// components
+import { DeleteProjectModal, JoinProjectModal } from "components/project";
+
+export type ProjectCardProps = {
+  project: IProject;
+};
+
+export const ProjectCard: React.FC<ProjectCardProps> = observer((props) => {
+  const { project } = props;
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // toast
+  const { setToastAlert } = useToast();
+  // states
+  const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
+  const [joinProjectModalOpen, setJoinProjectModal] = useState(false);
+
+  const { project: projectStore }: RootStore = useMobxStore();
+
+  const isOwner = project.member_role === 20;
+  const isMember = project.member_role === 15;
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug) return;
+
+    projectStore.addProjectToFavorites(workspaceSlug.toString(), project.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !project) return;
+
+    projectStore.removeProjectFromFavorites(workspaceSlug.toString(), project.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleCopyText = () => {
+    const originURL = typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
+
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${project.id}/issues`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Project link copied to clipboard.",
+      });
+    });
+  };
+
+  return (
+    <>
+      {/* Delete Project Modal  */}
+      <DeleteProjectModal
+        project={project}
+        isOpen={deleteProjectModalOpen}
+        onClose={() => setDeleteProjectModal(false)}
+      />
+      {workspaceSlug && (
+        <JoinProjectModal
+          workspaceSlug={workspaceSlug?.toString()}
+          project={project}
+          isOpen={joinProjectModalOpen}
+          handleClose={() => setJoinProjectModal(false)}
+        />
+      )}
+
+      {/* Card Information */}
+      <div className="flex flex-col rounded-[10px] bg-custom-background-90 shadow">
+        <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
+          <a>
+            <div className="relative h-32 w-full rounded-t-[10px]">
+              <img
+                src={
+                  project.cover_image ??
+                  "https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
+                }
+                alt={project.name}
+                className="absolute top-0 left-0 h-full w-full object-cover rounded-t-[10px]"
+              />
+              <div className="absolute bottom-4 right-4 flex items-center gap-3 text-white">
+                {!project.is_member ? (
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setJoinProjectModal(true);
+                    }}
+                    className="flex cursor-pointer items-center gap-1 rounded bg-green-600 px-2 py-1 text-xs"
+                  >
+                    <Plus height={12} width={12} />
+                    <span>Select to Join</span>
+                  </button>
+                ) : (
+                  <span className="cursor-default rounded bg-green-600 px-2 py-1 text-xs">Joined</span>
+                )}
+              </div>
+
+              <div className="absolute top-4 right-4 bg-slate-300 rounded z-10">
+                <button
+                  className="grid h-6 w-9 place-items-center cursor-pointer"
+                  onClick={(e) => {
+                    if (project.is_favorite) {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleRemoveFromFavorites();
+                    } else {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleAddToFavorites();
+                    }
+                  }}
+                >
+                  <Star className={`h-3.5 w-3.5 ${project.is_favorite ? "text-orange-400" : ""} `} />
+                </button>
+              </div>
+              <div className="absolute bottom-4 left-4 bg-slate-300 rounded-md">
+                {project.emoji ? (
+                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                    {renderEmoji(project.emoji)}
+                  </span>
+                ) : project.icon_prop ? (
+                  renderEmoji(project.icon_prop)
+                ) : null}
+              </div>
+            </div>
+          </a>
+        </Link>
+        <div className="flex h-full flex-col rounded-b-[10px] p-4 text-custom-text-200">
+          <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
+            <a>
+              <div className="flex items-center gap-1">
+                <h3 className="text-1.5xl font-medium text-custom-text-100">{project.name}</h3>
+              </div>
+              <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">
+            <Tooltip
+              tooltipContent={`Created at ${renderShortDateWithYearFormat(project.created_at)}`}
+              position="bottom"
+            >
+              <div className="flex cursor-default items-center gap-1.5 text-xs">
+                <CalendarDays height={14} width={14} />
+                {renderShortDateWithYearFormat(project.created_at)}
+              </div>
+            </Tooltip>
+            {project.is_member ? (
+              <div className="flex items-center gap-1">
+                <div className="flex items-center justify-center p-1 hover:bg-custom-background-80 rounded">
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      handleCopyText();
+                    }}
+                  >
+                    <Link2Icon height={16} width={16} className="-rotate-45" />
+                  </button>
+                </div>
+                {(isOwner || isMember) && (
+                  <Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>
+                    <a className="flex items-center justify-center p-1 hover:bg-custom-background-80 rounded">
+                      <Pencil height={16} width={16} />
+                    </a>
+                  </Link>
+                )}
+                {isOwner && (
+                  <div className="flex items-center justify-center p-1 hover:bg-custom-background-80 rounded">
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        setDeleteProjectModal(true);
+                      }}
+                    >
+                      <Trash2 height={16} width={16} />
+                    </button>
+                  </div>
+                )}
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/project/confirm-project-member-remove.tsx b/web/components/project/confirm-project-member-remove.tsx
index 4edc27821..3711fe224 100644
--- a/web/components/project/confirm-project-member-remove.tsx
+++ b/web/components/project/confirm-project-member-remove.tsx
@@ -1,10 +1,10 @@
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { SecondaryButton, DangerButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -57,33 +57,29 @@ const ConfirmProjectMemberRemove: React.FC<Props> = ({ isOpen, onClose, data, ha
                 <div className="bg-custom-background-80 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-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Remove {data?.display_name}?
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to remove member-{" "}
-                          <span className="font-bold">{data?.display_name}</span>? They will no
-                          longer have access to this project. This action cannot be undone.
+                          <span className="font-bold">{data?.display_name}</span>? They will no longer have access to
+                          this project. 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}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/project/create-project-modal.tsx b/web/components/project/create-project-modal.tsx
index e0afea1ce..6c4f0033b 100644
--- a/web/components/project/create-project-modal.tsx
+++ b/web/components/project/create-project-modal.tsx
@@ -1,49 +1,32 @@
-import React, { useState, useEffect } from "react";
-
+import { useState, useEffect, Fragment } from "react";
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
 import { useForm, Controller } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// services
-import projectServices from "services/project.service";
+// icons
+import { XMarkIcon } from "@heroicons/react/24/outline";
 // hooks
 import useToast from "hooks/use-toast";
 import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 import useWorkspaceMembers from "hooks/use-workspace-members";
 // ui
-import {
-  Input,
-  TextArea,
-  CustomSelect,
-  PrimaryButton,
-  SecondaryButton,
-  Icon,
-  Avatar,
-  CustomSearchSelect,
-} from "components/ui";
-// icons
-import { XMarkIcon } from "@heroicons/react/24/outline";
+import { CustomSelect, Icon, Avatar, CustomSearchSelect } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // components
 import { ImagePickerPopover } from "components/core";
 import EmojiIconPicker from "components/emoji-icon-picker";
 // helpers
 import { getRandomEmoji, renderEmoji } from "helpers/emoji.helper";
 // types
-import { ICurrentUserResponse, IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
+import { IUser, IProject } from "types";
 // constants
 import { NETWORK_CHOICES } from "constants/project";
+import { useMobxStore } from "lib/mobx/store-provider";
 
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   setToFavorite?: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
 const defaultValues: Partial<IProject> = {
@@ -75,12 +58,11 @@ const IsGuestCondition: React.FC<{
   return null;
 };
 
-export const CreateProjectModal: React.FC<Props> = ({
-  isOpen,
-  setIsOpen,
-  setToFavorite = false,
-  user,
-}) => {
+export const CreateProjectModal: React.FC<Props> = (props) => {
+  const { isOpen, setIsOpen, setToFavorite = false } = props;
+  // store
+  const { project: projectStore } = useMobxStore();
+  // states
   const [isChangeInIdentifierRequired, setIsChangeInIdentifierRequired] = useState(true);
 
   const { setToastAlert } = useToast();
@@ -92,7 +74,6 @@ export const CreateProjectModal: React.FC<Props> = ({
   const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
 
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     reset,
@@ -113,42 +94,27 @@ export const CreateProjectModal: React.FC<Props> = ({
   const handleAddToFavorites = (projectId: string) => {
     if (!workspaceSlug) return;
 
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === projectId ? { ...p, is_favorite: true } : p)),
-      false
-    );
-
-    projectServices
-      .addProjectToFavorites(workspaceSlug as string, {
-        project: projectId,
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't remove the project from favorites. Please try again.",
-        })
-      );
+    projectStore.addProjectToFavorites(workspaceSlug.toString(), projectId).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
   };
 
   const onSubmit = async (formData: IProject) => {
     if (!workspaceSlug) return;
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { emoji_and_icon, ...payload } = formData;
 
     if (typeof formData.emoji_and_icon === "object") payload.icon_prop = formData.emoji_and_icon;
     else payload.emoji = formData.emoji_and_icon;
 
-    await projectServices
-      .createProject(workspaceSlug.toString(), payload, user)
+    await projectStore
+      .createProject(workspaceSlug.toString(), payload)
       .then((res) => {
-        mutate<IProject[]>(
-          PROJECTS_LIST(workspaceSlug.toString(), { is_favorite: "all" }),
-          (prevData) => [res, ...(prevData ?? [])],
-          false
-        );
         setToastAlert({
           type: "success",
           title: "Success!",
@@ -193,7 +159,7 @@ export const CreateProjectModal: React.FC<Props> = ({
     setIsChangeInIdentifierRequired(false);
   };
 
-  const options = workspaceMembers?.map((member) => ({
+  const options = workspaceMembers?.map((member: any) => ({
     value: member.member.id,
     query: member.member.display_name,
     content: (
@@ -206,14 +172,13 @@ export const CreateProjectModal: React.FC<Props> = ({
 
   const currentNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
 
-  if (memberDetails && isOpen)
-    if (memberDetails.role <= 10) return <IsGuestCondition setIsOpen={setIsOpen} />;
+  if (memberDetails && isOpen) if (memberDetails.role <= 10) return <IsGuestCondition setIsOpen={setIsOpen} />;
 
   return (
-    <Transition.Root show={isOpen} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={React.Fragment}
+          as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -227,7 +192,7 @@ export const CreateProjectModal: React.FC<Props> = ({
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
             <Transition.Child
-              as={React.Fragment}
+              as={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"
@@ -256,6 +221,7 @@ export const CreateProjectModal: React.FC<Props> = ({
                       onChange={(image) => {
                         setValue("cover_image", image);
                       }}
+                      control={control}
                       value={watch("cover_image")}
                     />
                   </div>
@@ -277,47 +243,43 @@ export const CreateProjectModal: React.FC<Props> = ({
                     />
                   </div>
                 </div>
-                <form
-                  onSubmit={handleSubmit(onSubmit)}
-                  className="divide-y-[0.5px] divide-custom-border-100 px-3"
-                >
+                <form onSubmit={handleSubmit(onSubmit)} className="divide-y-[0.5px] divide-custom-border-100 px-3">
                   <div className="mt-9 space-y-6 pb-5">
                     <div className="grid grid-cols-1 md:grid-cols-4 gap-y-3 gap-x-2">
                       <div className="md:col-span-3">
-                        <Input
-                          id="name"
+                        <Controller
+                          control={control}
                           name="name"
-                          type="name"
-                          placeholder="Project Title"
-                          onChange={changeIdentifierOnNameChange}
-                          error={errors.name}
-                          register={register}
-                          validations={{
+                          rules={{
                             required: "Title is required",
                             maxLength: {
                               value: 255,
                               message: "Title should be less than 255 characters",
                             },
                           }}
-                          autoComplete="off"
-                          tabIndex={1}
+                          render={({ field: { value, ref } }) => (
+                            <Input
+                              id="name"
+                              name="name"
+                              type="text"
+                              value={value}
+                              onChange={changeIdentifierOnNameChange}
+                              ref={ref}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Project Title"
+                              className="w-full"
+                            />
+                          )}
                         />
                       </div>
                       <div>
-                        <Input
-                          id="identifier"
+                        <Controller
+                          control={control}
                           name="identifier"
-                          type="text"
-                          className="text-sm"
-                          placeholder="Identifier"
-                          error={errors.identifier}
-                          register={register}
-                          onChange={handleIdentifierChange}
-                          validations={{
+                          rules={{
                             required: "Identifier is required",
                             validate: (value) =>
-                              /^[A-Z0-9]+$/.test(value.toUpperCase()) ||
-                              "Identifier must be in uppercase.",
+                              /^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
                             minLength: {
                               value: 1,
                               message: "Identifier must at least be of 1 character",
@@ -327,16 +289,36 @@ export const CreateProjectModal: React.FC<Props> = ({
                               message: "Identifier must at most be of 12 characters",
                             },
                           }}
+                          render={({ field: { value, ref } }) => (
+                            <Input
+                              id="identifier"
+                              name="identifier"
+                              type="text"
+                              value={value}
+                              onChange={handleIdentifierChange}
+                              ref={ref}
+                              hasError={Boolean(errors.name)}
+                              placeholder="Identifier"
+                              className="text-sm w-full"
+                            />
+                          )}
                         />
                       </div>
                       <div className="md:col-span-4">
-                        <TextArea
-                          id="description"
+                        <Controller
                           name="description"
-                          className="text-sm !h-24"
-                          placeholder="Description..."
-                          error={errors.description}
-                          register={register}
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TextArea
+                              id="description"
+                              name="description"
+                              value={value}
+                              placeholder="Description..."
+                              onChange={onChange}
+                              className="text-sm !h-24"
+                              hasError={Boolean(errors?.name)}
+                            />
+                          )}
                         />
                       </div>
                     </div>
@@ -384,9 +366,7 @@ export const CreateProjectModal: React.FC<Props> = ({
                           name="project_lead"
                           control={control}
                           render={({ field: { value, onChange } }) => {
-                            const selectedMember = workspaceMembers?.find(
-                              (m) => m.member.id === value
-                            );
+                            const selectedMember = workspaceMembers?.find((m: any) => m.member.id === value);
 
                             return (
                               <CustomSearchSelect
@@ -409,10 +389,7 @@ export const CreateProjectModal: React.FC<Props> = ({
                                       </>
                                     ) : (
                                       <>
-                                        <Icon
-                                          iconName="group"
-                                          className="!text-sm text-custom-text-400"
-                                        />
+                                        <Icon iconName="group" className="!text-sm text-custom-text-400" />
                                         <span className="text-custom-text-400">Lead</span>
                                       </>
                                     )}
@@ -428,10 +405,12 @@ export const CreateProjectModal: React.FC<Props> = ({
                   </div>
 
                   <div className="flex justify-end gap-2 pt-5">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" size="sm" loading={isSubmitting}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
                       {isSubmitting ? "Creating..." : "Create Project"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/project/delete-project-modal.tsx b/web/components/project/delete-project-modal.tsx
index d6f7ba0f0..d3185665b 100644
--- a/web/components/project/delete-project-modal.tsx
+++ b/web/components/project/delete-project-modal.tsx
@@ -1,32 +1,22 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// services
-import projectService from "services/project.service";
 // hooks
 import useToast from "hooks/use-toast";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { DangerButton, Input, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
-import type { ICurrentUserResponse, IProject } from "types";
+import type { IProject } from "types";
 // fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
+import { useMobxStore } from "lib/mobx/store-provider";
 
-type TConfirmProjectDeletionProps = {
+type DeleteProjectModal = {
   isOpen: boolean;
+  project: IProject;
   onClose: () => void;
-  onSuccess?: () => void;
-  data: IProject | null;
-  user: ICurrentUserResponse | undefined;
 };
 
 const defaultValues = {
@@ -34,28 +24,25 @@ const defaultValues = {
   confirmDelete: "",
 };
 
-export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
-  isOpen,
-  data,
-  onClose,
-  onSuccess,
-  user,
-}) => {
+export const DeleteProjectModal: React.FC<DeleteProjectModal> = (props) => {
+  const { isOpen, project, onClose } = props;
+  // store
+  const { project: projectStore } = useMobxStore();
+  // router
   const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
+  const { workspaceSlug } = router.query;
+  // toast
   const { setToastAlert } = useToast();
-
+  // form info
   const {
     control,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     handleSubmit,
     reset,
     watch,
   } = useForm({ defaultValues });
 
-  const canDelete =
-    watch("projectName") === data?.name && watch("confirmDelete") === "delete my project";
+  const canDelete = watch("projectName") === project?.name && watch("confirmDelete") === "delete my project";
 
   const handleClose = () => {
     const timer = setTimeout(() => {
@@ -67,30 +54,20 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
   };
 
   const onSubmit = async () => {
-    if (!data || !workspaceSlug || !canDelete) return;
+    if (!workspaceSlug || !canDelete) return;
 
-    await projectService
-      .deleteProject(workspaceSlug.toString(), data.id, user)
+    await projectStore
+      .deleteProject(workspaceSlug.toString(), project.id)
       .then(() => {
         handleClose();
-
-        mutate<IProject[]>(
-          PROJECTS_LIST(workspaceSlug.toString(), { is_favorite: "all" }),
-          (prevData) => prevData?.filter((project: IProject) => project.id !== data.id),
-          false
-        );
-
-        if (onSuccess) onSuccess();
-
-        if (projectId && projectId === data.id) router.push(`/${workspaceSlug}/projects`);
       })
-      .catch(() =>
+      .catch(() => {
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "Something went wrong. Please try again later.",
-        })
-      );
+        });
+      });
   };
 
   return (
@@ -123,10 +100,7 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Project</h3>
@@ -135,56 +109,63 @@ export const DeleteProjectModal: React.FC<TConfirmProjectDeletionProps> = ({
                   <span>
                     <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete project{" "}
-                      <span className="break-words font-semibold">{data?.name}</span>? All of the
-                      data related to the project will be permanently removed. This action cannot be
-                      undone
+                      <span className="break-words font-semibold">{project?.name}</span>? All of the data related to the
+                      project will be permanently removed. This action cannot be undone
                     </p>
                   </span>
                   <div className="text-custom-text-200">
                     <p className="break-words text-sm ">
-                      Enter the project name{" "}
-                      <span className="font-medium text-custom-text-100">{data?.name}</span> to
-                      continue:
+                      Enter the project name <span className="font-medium text-custom-text-100">{project?.name}</span>{" "}
+                      to continue:
                     </p>
                     <Controller
                       control={control}
                       name="projectName"
-                      render={({ field: { onChange, value } }) => (
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="projectName"
+                          name="projectName"
                           type="text"
-                          placeholder="Project name"
-                          className="mt-2"
                           value={value}
                           onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.projectName)}
+                          placeholder="Project name"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
                   </div>
                   <div className="text-custom-text-200">
                     <p className="text-sm">
-                      To confirm, type{" "}
-                      <span className="font-medium text-custom-text-100">delete my project</span>{" "}
+                      To confirm, type <span className="font-medium text-custom-text-100">delete my project</span>{" "}
                       below:
                     </p>
                     <Controller
                       control={control}
                       name="confirmDelete"
-                      render={({ field: { onChange, value } }) => (
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="confirmDelete"
+                          name="confirmDelete"
                           type="text"
-                          placeholder="Enter 'delete my project'"
-                          className="mt-2"
-                          onChange={onChange}
                           value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.confirmDelete)}
+                          placeholder="Enter 'delete my project'"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton type="submit" disabled={!canDelete} loading={isSubmitting}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" type="submit" disabled={!canDelete} loading={isSubmitting}>
                       {isSubmitting ? "Deleting..." : "Delete Project"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/project/form-loader.tsx b/web/components/project/form-loader.tsx
new file mode 100644
index 000000000..039cdd25f
--- /dev/null
+++ b/web/components/project/form-loader.tsx
@@ -0,0 +1,62 @@
+import { FC } from "react";
+// components
+import { Loader } from "@plane/ui";
+
+export interface IProjectDetailsFormLoader {}
+
+export const ProjectDetailsFormLoader: FC<IProjectDetailsFormLoader> = () => (
+  <>
+    <div className="relative h-44 w-full mt-6">
+      <Loader>
+        <Loader.Item height="auto" width="46px" />
+      </Loader>
+      <div className="flex items-end justify-between gap-3 absolute bottom-4 w-full px-4">
+        <div className="flex gap-3 flex-grow truncate">
+          <div className="flex items-center justify-center flex-shrink-0 bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
+            <Loader>
+              <Loader.Item height="46px" width="46px" />
+            </Loader>
+          </div>
+        </div>
+        <div className="flex justify-center flex-shrink-0">
+          <Loader>
+            <Loader.Item height="32px" width="108px" />
+          </Loader>
+        </div>
+      </div>
+    </div>
+    <div className="flex flex-col gap-8 my-8">
+      <div className="flex flex-col gap-1">
+        <h4 className="text-sm">Project Name</h4>
+        <Loader>
+          <Loader.Item height="46px" width="100%" />
+        </Loader>
+      </div>
+      <div className="flex flex-col gap-1">
+        <h4 className="text-sm">Description</h4>
+        <Loader className="w-full">
+          <Loader.Item height="102px" width="full" />
+        </Loader>
+      </div>
+      <div className="flex items-center justify-between gap-10 w-full">
+        <div className="flex flex-col gap-1 w-1/2">
+          <h4 className="text-sm">Identifier</h4>
+          <Loader>
+            <Loader.Item height="36px" width="100%" />
+          </Loader>
+        </div>
+        <div className="flex flex-col gap-1 w-1/2">
+          <h4 className="text-sm">Network</h4>
+          <Loader className="w-full">
+            <Loader.Item height="46px" width="100%" />
+          </Loader>
+        </div>
+      </div>
+      <div className="flex items-center justify-between py-2">
+        <Loader className="mt-2 w-full">
+          <Loader.Item height="34px" width="100px" />
+        </Loader>
+      </div>
+    </div>
+  </>
+);
diff --git a/web/components/project/form.tsx b/web/components/project/form.tsx
new file mode 100644
index 000000000..bd3ed8452
--- /dev/null
+++ b/web/components/project/form.tsx
@@ -0,0 +1,284 @@
+import { FC } from "react";
+import { Controller, useForm } from "react-hook-form";
+// components
+import EmojiIconPicker from "components/emoji-icon-picker";
+import { ImagePickerPopover } from "components/core";
+import { CustomSelect } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
+// types
+import { IProject, IWorkspace } from "types";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
+// constants
+import { NETWORK_CHOICES } from "constants/project";
+// services
+import { ProjectService } from "services/project";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IProjectDetailsForm {
+  project: IProject;
+  workspaceSlug: string;
+  isAdmin: boolean;
+}
+
+const projectService = new ProjectService();
+
+export const ProjectDetailsForm: FC<IProjectDetailsForm> = (props) => {
+  const { project, workspaceSlug, isAdmin } = props;
+  // store
+  const { project: projectStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    watch,
+    control,
+    setValue,
+    setError,
+    formState: { errors, isSubmitting },
+  } = useForm<IProject>({
+    defaultValues: {
+      ...project,
+      emoji_and_icon: project.emoji ?? project.icon_prop,
+      workspace: (project.workspace as IWorkspace).id,
+    },
+  });
+
+  const handleIdentifierChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+
+    const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
+    const formattedValue = alphanumericValue.toUpperCase();
+
+    setValue("identifier", formattedValue);
+  };
+
+  const updateProject = async (payload: Partial<IProject>) => {
+    if (!workspaceSlug || !project) return;
+
+    return projectStore
+      .updateProject(workspaceSlug.toString(), project.id, payload)
+      .then(() => {
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Project updated successfully",
+        });
+      })
+      .catch(() => {
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Project could not be updated. Please try again.",
+        });
+      });
+  };
+
+  const onSubmit = async (formData: IProject) => {
+    if (!workspaceSlug) return;
+
+    const payload: Partial<IProject> = {
+      name: formData.name,
+      network: formData.network,
+      identifier: formData.identifier,
+      description: formData.description,
+      cover_image: formData.cover_image,
+    };
+
+    if (typeof formData.emoji_and_icon === "object") {
+      payload.emoji = null;
+      payload.icon_prop = formData.emoji_and_icon;
+    } else {
+      payload.emoji = formData.emoji_and_icon;
+      payload.icon_prop = null;
+    }
+
+    if (project.identifier !== formData.identifier)
+      await projectService
+        .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "")
+        .then(async (res) => {
+          if (res.exists) setError("identifier", { message: "Identifier already exists" });
+          else await updateProject(payload);
+        });
+    else await updateProject(payload);
+  };
+
+  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === project?.network);
+  const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <div className="relative h-44 w-full mt-6">
+        <img src={watch("cover_image")!} alt={watch("cover_image")!} className="h-44 w-full rounded-md object-cover" />
+        <div className="flex items-end justify-between gap-3 absolute bottom-4 w-full px-4">
+          <div className="flex gap-3 flex-grow truncate">
+            <div className="flex items-center justify-center flex-shrink-0 bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
+              <div className="h-7 w-7 grid place-items-center">
+                <Controller
+                  control={control}
+                  name="emoji_and_icon"
+                  render={({ field: { value, onChange } }) => (
+                    <EmojiIconPicker
+                      label={value ? renderEmoji(value) : "Icon"}
+                      value={value}
+                      onChange={onChange}
+                      disabled={!isAdmin}
+                    />
+                  )}
+                />
+              </div>
+            </div>
+            <div className="flex flex-col gap-1 text-white truncate">
+              <span className="text-lg font-semibold truncate">{watch("name")}</span>
+              <span className="flex items-center gap-2 text-sm">
+                <span>
+                  {watch("identifier")} . {currentNetwork?.label}
+                </span>
+              </span>
+            </div>
+          </div>
+
+          <div className="flex justify-center flex-shrink-0">
+            <div>
+              <Controller
+                control={control}
+                name="cover_image"
+                render={({ field: { value, onChange } }) => (
+                  <ImagePickerPopover
+                    label={"Change cover"}
+                    control={control}
+                    onChange={onChange}
+                    value={value}
+                    disabled={!isAdmin}
+                  />
+                )}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-8 my-8">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Project Name</h4>
+          <Controller
+            control={control}
+            name="name"
+            rules={{
+              required: "Name is required",
+            }}
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="name"
+                name="name"
+                type="text"
+                ref={ref}
+                value={value}
+                onChange={onChange}
+                hasError={Boolean(errors.name)}
+                className="!p-3 rounded-md font-medium"
+                placeholder="Project Name"
+                disabled={!isAdmin}
+              />
+            )}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Description</h4>
+          <Controller
+            name="description"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <TextArea
+                id="description"
+                name="description"
+                value={value}
+                placeholder="Enter project description"
+                onChange={onChange}
+                className="min-h-[102px] text-sm"
+                hasError={Boolean(errors?.description)}
+                disabled={!isAdmin}
+              />
+            )}
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-10 w-full">
+          <div className="flex flex-col gap-1 w-1/2">
+            <h4 className="text-sm">Identifier</h4>
+            <Controller
+              control={control}
+              name="identifier"
+              rules={{
+                required: "Identifier is required",
+                validate: (value) => /^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
+                minLength: {
+                  value: 1,
+                  message: "Identifier must at least be of 1 character",
+                },
+                maxLength: {
+                  value: 12,
+                  message: "Identifier must at most be of 5 characters",
+                },
+              }}
+              render={({ field: { value, ref } }) => (
+                <Input
+                  id="identifier"
+                  name="identifier"
+                  type="text"
+                  value={value}
+                  onChange={handleIdentifierChange}
+                  ref={ref}
+                  hasError={Boolean(errors.identifier)}
+                  placeholder="Enter identifier"
+                  className="w-full"
+                  disabled={!isAdmin}
+                />
+              )}
+            />
+          </div>
+
+          <div className="flex flex-col gap-1 w-1/2">
+            <h4 className="text-sm">Network</h4>
+            <Controller
+              name="network"
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <CustomSelect
+                  value={value}
+                  onChange={onChange}
+                  label={selectedNetwork?.label ?? "Select network"}
+                  className="!border-custom-border-200 !shadow-none"
+                  input
+                  disabled={!isAdmin}
+                  optionsClassName="w-full"
+                >
+                  {NETWORK_CHOICES.map((network) => (
+                    <CustomSelect.Option key={network.key} value={network.key}>
+                      {network.label}
+                    </CustomSelect.Option>
+                  ))}
+                </CustomSelect>
+              )}
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between py-2">
+          <>
+            <Button variant="primary" type="submit" loading={isSubmitting} disabled={!isAdmin}>
+              {isSubmitting ? "Updating Project..." : "Update Project"}
+            </Button>
+            <span className="text-sm text-custom-sidebar-text-400 italic">
+              Created on {renderShortDateWithYearFormat(project?.created_at)}
+            </span>
+          </>
+        </div>
+      </div>
+    </form>
+  );
+};
diff --git a/web/components/project/index.ts b/web/components/project/index.ts
index 329e826a8..e702de8ad 100644
--- a/web/components/project/index.ts
+++ b/web/components/project/index.ts
@@ -3,10 +3,14 @@ export * from "./delete-project-modal";
 export * from "./sidebar-list";
 export * from "./settings-sidebar";
 export * from "./single-integration-card";
-export * from "./single-project-card";
-export * from "./single-sidebar-project";
-export * from "./confirm-project-leave-modal";
+export * from "./sidebar-list-item";
+export * from "./leave-project-modal";
 export * from "./member-select";
 export * from "./members-select";
 export * from "./label-select";
 export * from "./priority-select";
+export * from "./card-list";
+export * from "./card";
+export * from "./join-project-modal";
+export * from "./form";
+export * from "./form-loader";
diff --git a/web/components/project/join-project-modal.tsx b/web/components/project/join-project-modal.tsx
index 3128a0a42..ef6874db9 100644
--- a/web/components/project/join-project-modal.tsx
+++ b/web/components/project/join-project-modal.tsx
@@ -1,26 +1,32 @@
-import React, { useState } from "react";
-
-// headless ui
+import { useState, Fragment } from "react";
 import { Transition, Dialog } from "@headlessui/react";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
 import type { IProject } from "types";
+// lib
+import { useMobxStore } from "lib/mobx/store-provider";
 
 // type
 type TJoinProjectModalProps = {
-  data?: IProject;
-  onClose: () => void;
-  onJoin: () => Promise<void>;
+  isOpen: boolean;
+  workspaceSlug: string;
+  project: IProject;
+  handleClose: () => void;
 };
 
-export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, onJoin, data }) => {
+export const JoinProjectModal: React.FC<TJoinProjectModalProps> = (props) => {
+  const { handleClose, isOpen, project, workspaceSlug } = props;
+  // store
+  const { project: projectStore } = useMobxStore();
+  // states
   const [isJoiningLoading, setIsJoiningLoading] = useState(false);
 
   const handleJoin = () => {
     setIsJoiningLoading(true);
 
-    onJoin()
+    projectStore
+      .joinProject(workspaceSlug, [project.id])
       .then(() => {
         setIsJoiningLoading(false);
         handleClose();
@@ -30,15 +36,11 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
       });
   };
 
-  const handleClose = () => {
-    onClose();
-  };
-
   return (
-    <Transition.Root show={Boolean(data)} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={React.Fragment}
+          as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -52,7 +54,7 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
         <div className="fixed inset-0 z-20 overflow-y-auto">
           <div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
             <Transition.Child
-              as={React.Fragment}
+              as={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"
@@ -62,23 +64,21 @@ export const JoinProjectModal: React.FC<TJoinProjectModalProps> = ({ onClose, on
             >
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-100 border border-custom-border-300 px-5 py-8 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6">
                 <div className="space-y-5">
-                  <Dialog.Title
-                    as="h3"
-                    className="text-lg font-medium leading-6 text-custom-text-100"
-                  >
+                  <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                     Join Project?
                   </Dialog.Title>
                   <p>
-                    Are you sure you want to join{" "}
-                    <span className="font-semibold">{data?.name}</span>?
+                    Are you sure you want to join <span className="font-semibold">{project?.name}</span>?
                   </p>
                   <div className="space-y-3" />
                 </div>
                 <div className="mt-5 flex justify-end gap-2">
-                  <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <PrimaryButton type="submit" onClick={handleJoin} loading={isJoiningLoading}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="primary" type="submit" onClick={handleJoin} loading={isJoiningLoading}>
                     {isJoiningLoading ? "Joining..." : "Join Project"}
-                  </PrimaryButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/project/label-select.tsx b/web/components/project/label-select.tsx
index a34d778f9..01052a8b4 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
@@ -18,7 +18,7 @@ import { CheckIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { PlusIcon } from "lucide-react";
 // types
 import { Tooltip } from "components/ui";
-import { ICurrentUserResponse, IIssueLabels } from "types";
+import { IUser, IIssueLabels } from "types";
 import { Placement } from "@popperjs/core";
 // constants
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
@@ -35,9 +35,12 @@ type Props = {
   placement?: Placement;
   hideDropdownArrow?: boolean;
   disabled?: boolean;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | 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
   );
 
@@ -91,9 +94,7 @@ export const LabelSelect: React.FC<Props> = ({
   }));
 
   const filteredOptions =
-    query === ""
-      ? options
-      : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const label = (
     <div className={`flex  items-center gap-2 text-custom-text-200`}>
@@ -186,9 +187,7 @@ export const LabelSelect: React.FC<Props> = ({
                   }  ${buttonClassName}`}
                 >
                   {label}
-                  {!hideDropdownArrow && !disabled && (
-                    <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                  )}
+                  {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
                 </button>
               </Combobox.Button>
 
diff --git a/web/components/project/confirm-project-leave-modal.tsx b/web/components/project/leave-project-modal.tsx
similarity index 70%
rename from web/components/project/confirm-project-leave-modal.tsx
rename to web/components/project/leave-project-modal.tsx
index 7d6582869..7722b51ff 100644
--- a/web/components/project/confirm-project-leave-modal.tsx
+++ b/web/components/project/leave-project-modal.tsx
@@ -1,25 +1,15 @@
-import React from "react";
-// next imports
+import { FC, Fragment } from "react";
 import { useRouter } from "next/router";
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
-// icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-// ui
-import { DangerButton, Input, SecondaryButton } from "components/ui";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
-// mobx react lite
 import { observer } from "mobx-react-lite";
+// ui
+import { Button, Input } from "@plane/ui";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
 // hooks
 import useToast from "hooks/use-toast";
-import useUser from "hooks/use-user";
-import useProjects from "hooks/use-projects";
 // types
 import { IProject } from "types";
 
@@ -33,48 +23,46 @@ const defaultValues: FormData = {
   confirmLeave: "",
 };
 
-export const ConfirmProjectLeaveModal: React.FC = observer(() => {
+export interface ILeaveProjectModal {
+  project: IProject;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export const LeaveProjectModal: FC<ILeaveProjectModal> = observer((props) => {
+  const { project, isOpen } = props;
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
-  const store: RootStore = useMobxStore();
-  const { project } = store;
-
-  const { user } = useUser();
-  const { mutateProjects } = useProjects();
-
+  // store
+  const { project: projectStore } = useMobxStore();
+  // toast
   const { setToastAlert } = useToast();
 
   const {
     control,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     handleSubmit,
     reset,
-    watch,
   } = useForm({ defaultValues });
 
   const handleClose = () => {
-    project.handleProjectLeaveModal(null);
-
     reset({ ...defaultValues });
   };
 
   const onSubmit = async (data: any) => {
+    if (!workspaceSlug) return;
+
     if (data) {
-      if (data.projectName === project?.projectLeaveDetails?.name) {
+      if (data.projectName === project?.name) {
         if (data.confirmLeave === "Leave Project") {
-          return project
-            .leaveProject(
-              project.projectLeaveDetails.workspaceSlug.toString(),
-              project.projectLeaveDetails.id.toString(),
-              user
-            )
-            .then((res) => {
-              mutateProjects();
+          return projectStore
+            .leaveProject(workspaceSlug.toString(), project.id)
+            .then(() => {
               handleClose();
               router.push(`/${workspaceSlug}/projects`);
             })
-            .catch((err) => {
+            .catch(() => {
               setToastAlert({
                 type: "error",
                 title: "Error!",
@@ -105,10 +93,10 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
   };
 
   return (
-    <Transition.Root show={project.projectLeaveModal} as={React.Fragment}>
+    <Transition.Root show={isOpen} as={Fragment}>
       <Dialog as="div" className="relative z-20" onClose={handleClose}>
         <Transition.Child
-          as={React.Fragment}
+          as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
           enterTo="opacity-100"
@@ -122,7 +110,7 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
         <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}
+              as={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"
@@ -134,10 +122,7 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Leave Project</h3>
@@ -147,29 +132,33 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
                   <span>
                     <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to leave the project -
-                      <span className="font-medium text-custom-text-100">{` "${project?.projectLeaveDetails?.name}" `}</span>
-                      ? All of the issues associated with you will become inaccessible.
+                      <span className="font-medium text-custom-text-100">{` "${project?.name}" `}</span>? All of the
+                      issues associated with you will become inaccessible.
                     </p>
                   </span>
 
                   <div className="text-custom-text-200">
                     <p className="break-words text-sm ">
-                      Enter the project name{" "}
-                      <span className="font-medium text-custom-text-100">
-                        {project?.projectLeaveDetails?.name}
-                      </span>{" "}
+                      Enter the project name <span className="font-medium text-custom-text-100">{project?.name}</span>{" "}
                       to continue:
                     </p>
                     <Controller
                       control={control}
                       name="projectName"
-                      render={({ field: { onChange, value } }) => (
+                      rules={{
+                        required: "Label title is required",
+                      }}
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="projectName"
+                          name="projectName"
                           type="text"
-                          placeholder="Enter project name"
-                          className="mt-2"
                           value={value}
                           onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.projectName)}
+                          placeholder="Enter project name"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
@@ -177,28 +166,33 @@ export const ConfirmProjectLeaveModal: React.FC = observer(() => {
 
                   <div className="text-custom-text-200">
                     <p className="text-sm">
-                      To confirm, type{" "}
-                      <span className="font-medium text-custom-text-100">Leave Project</span> below:
+                      To confirm, type <span className="font-medium text-custom-text-100">Leave Project</span> below:
                     </p>
                     <Controller
                       control={control}
                       name="confirmLeave"
-                      render={({ field: { onChange, value } }) => (
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="confirmLeave"
+                          name="confirmLeave"
                           type="text"
-                          placeholder="Enter 'leave project'"
-                          className="mt-2"
-                          onChange={onChange}
                           value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.confirmLeave)}
+                          placeholder="Enter 'leave project'"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
                   </div>
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton type="submit" loading={isSubmitting}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Leaving..." : "Leave Project"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/project/member-select.tsx b/web/components/project/member-select.tsx
index 0d29e8e8d..d7de89e33 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";
+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/members-select.tsx b/web/components/project/members-select.tsx
index 42dd89ef4..9ce7404b8 100644
--- a/web/components/project/members-select.tsx
+++ b/web/components/project/members-select.tsx
@@ -58,11 +58,7 @@ export const MembersSelect: React.FC<Props> = ({
     placement: placement ?? "bottom-start",
   });
 
-  const { members } = useProjectMembers(
-    workspaceSlug?.toString(),
-    projectId,
-    fetchStates && !renderWorkspaceMembers
-  );
+  const { members } = useProjectMembers(workspaceSlug?.toString(), projectId, fetchStates && !renderWorkspaceMembers);
 
   const { workspaceMembers } = useWorkspaceMembers(
     workspaceSlug?.toString() ?? "",
@@ -83,9 +79,7 @@ export const MembersSelect: React.FC<Props> = ({
   }));
 
   const filteredOptions =
-    query === ""
-      ? options
-      : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const label = (
     <Tooltip
@@ -131,15 +125,11 @@ export const MembersSelect: React.FC<Props> = ({
                 ref={setReferenceElement}
                 type="button"
                 className={`flex items-center justify-between gap-1 w-full text-xs ${
-                  disabled
-                    ? "cursor-not-allowed text-custom-text-200"
-                    : "cursor-pointer hover:bg-custom-background-80"
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
                 } ${buttonClassName}`}
               >
                 {label}
-                {!hideDropdownArrow && !disabled && (
-                  <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                )}
+                {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
               </button>
             </Combobox.Button>
             <Combobox.Options>
diff --git a/web/components/project/priority-select.tsx b/web/components/project/priority-select.tsx
index f9dda43e7..a02d6a1df 100644
--- a/web/components/project/priority-select.tsx
+++ b/web/components/project/priority-select.tsx
@@ -58,9 +58,7 @@ export const PrioritySelect: React.FC<Props> = ({
   }));
 
   const filteredOptions =
-    query === ""
-      ? options
-      : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const selectedOption = value ?? "None";
 
@@ -68,9 +66,7 @@ export const PrioritySelect: React.FC<Props> = ({
     <Tooltip tooltipHeading="Priority" tooltipContent={selectedOption} position="top">
       <div
         className={`grid place-items-center rounded "h-6 w-6 border shadow-sm ${
-          value === "urgent"
-            ? "border-red-500/20 bg-red-500"
-            : "border-custom-border-300 bg-custom-background-100"
+          value === "urgent" ? "border-red-500/20 bg-red-500" : "border-custom-border-300 bg-custom-background-100"
         } items-center`}
       >
         <span className="flex gap-1 items-center text-custom-text-200 text-xs">
@@ -106,15 +102,11 @@ export const PrioritySelect: React.FC<Props> = ({
           ref={setReferenceElement}
           type="button"
           className={`flex items-center justify-between gap-1 w-full text-xs ${
-            disabled
-              ? "cursor-not-allowed text-custom-text-200"
-              : "cursor-pointer hover:bg-custom-background-80"
+            disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
           } ${buttonClassName}`}
         >
           {label}
-          {!hideDropdownArrow && !disabled && (
-            <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-          )}
+          {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
         </button>
       </Combobox.Button>
       <Combobox.Options>
diff --git a/web/components/project/publish-project/index.tsx b/web/components/project/publish-project/index.tsx
new file mode 100644
index 000000000..6bebc086c
--- /dev/null
+++ b/web/components/project/publish-project/index.tsx
@@ -0,0 +1,2 @@
+export * from "./modal";
+export * from "./popover";
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index 56ed10ee0..1f356e780 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -6,28 +6,22 @@ import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // ui components
-import {
-  ToggleSwitch,
-  PrimaryButton,
-  SecondaryButton,
-  Icon,
-  DangerButton,
-  Loader,
-} from "components/ui";
+import { Button, Loader, ToggleSwitch } from "@plane/ui";
+import { Icon } from "components/ui";
 import { CustomPopover } from "./popover";
 // mobx react lite
 import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 import { RootStore } from "store/root";
-import { IProjectPublishSettings, TProjectPublishViews } from "store/project-publish";
+import { IProjectPublishSettings, TProjectPublishViews } from "store/project";
 // hooks
 import useToast from "hooks/use-toast";
 import useProjectDetails from "hooks/use-project-details";
 import useUser from "hooks/use-user";
 
 type Props = {
-  // user: ICurrentUserResponse | undefined;
+  // user: IUser | undefined;
 };
 
 type FormData = {
@@ -65,22 +59,20 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
 
   let plane_deploy_url = process.env.NEXT_PUBLIC_DEPLOY_URL;
 
-  if (typeof window !== 'undefined' && !plane_deploy_url) {
-    plane_deploy_url= window.location.protocol + "//" + window.location.host + "/spaces";
+  if (typeof window !== "undefined" && !plane_deploy_url) {
+    plane_deploy_url = window.location.protocol + "//" + window.location.host + "/spaces";
   }
-
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
+  // store
   const store: RootStore = useMobxStore();
   const { projectPublish } = store;
-
+  // hooks
   const { user } = useUser();
-
   const { mutateProjectDetails } = useProjectDetails();
-
   const { setToastAlert } = useToast();
-
+  // form info
   const {
     control,
     formState: { isSubmitting },
@@ -94,17 +86,13 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
 
   const handleClose = () => {
     projectPublish.handleProjectModal(null);
-
     setIsUpdateRequired(false);
     reset({ ...defaultValues });
   };
 
   // prefill form with the saved settings if the project is already published
   useEffect(() => {
-    if (
-      projectPublish.projectPublishSettings &&
-      projectPublish.projectPublishSettings !== "not-initialized"
-    ) {
+    if (projectPublish.projectPublishSettings && projectPublish.projectPublishSettings !== "not-initialized") {
       let userBoards: TProjectPublishViews[] = [];
 
       if (projectPublish.projectPublishSettings?.views) {
@@ -143,11 +131,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
       projectPublish.project_id !== null &&
       projectPublish?.projectPublishSettings === "not-initialized"
     ) {
-      projectPublish.getProjectSettingsAsync(
-        workspaceSlug.toString(),
-        projectPublish.project_id,
-        null
-      );
+      projectPublish.getProjectSettingsAsync(workspaceSlug.toString(), projectPublish.project_id, null);
     }
   }, [workspaceSlug, projectPublish, projectPublish.projectPublishModal]);
 
@@ -202,12 +186,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
     setIsUnpublishing(true);
 
     projectPublish
-      .unPublishProject(
-        workspaceSlug.toString(),
-        projectPublish.project_id as string,
-        publishId,
-        null
-      )
+      .unPublishProject(workspaceSlug.toString(), projectPublish.project_id as string, publishId, null)
       .then((res) => {
         mutateProjectDetails();
 
@@ -269,11 +248,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
 
   // check if an update is required or not
   const checkIfUpdateIsRequired = () => {
-    if (
-      !projectPublish.projectPublishSettings ||
-      projectPublish.projectPublishSettings === "not-initialized"
-    )
-      return;
+    if (!projectPublish.projectPublishSettings || projectPublish.projectPublishSettings === "not-initialized") return;
 
     const currentSettings = projectPublish.projectPublishSettings as IProjectPublishSettings;
     const newSettings = getValues();
@@ -289,8 +264,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
 
     let viewCheckFlag = 0;
     viewOptions.forEach((option) => {
-      if (currentSettings.views[option.key] !== newSettings.views.includes(option.key))
-        viewCheckFlag++;
+      if (currentSettings.views[option.key] !== newSettings.views.includes(option.key)) viewCheckFlag++;
     });
 
     if (viewCheckFlag !== 0) {
@@ -333,13 +307,13 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                   <div className="px-6 pt-4 flex items-center justify-between gap-2">
                     <h5 className="font-semibold text-xl inline-block">Publish</h5>
                     {projectPublish.projectPublishSettings !== "not-initialized" && (
-                      <DangerButton
+                      <Button
+                        variant="danger"
                         onClick={() => handleUnpublishProject(watch("id") ?? "")}
-                        className="!px-2 !py-1.5"
                         loading={isUnpublishing}
                       >
                         {isUnpublishing ? "Unpublishing..." : "Unpublish"}
-                      </DangerButton>
+                      </Button>
                     )}
                   </div>
 
@@ -416,9 +390,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                                       }}
                                     >
                                       <div className="text-sm">{option.label}</div>
-                                      <div
-                                        className={`w-[18px] h-[18px] relative flex justify-center items-center`}
-                                      >
+                                      <div className={`w-[18px] h-[18px] relative flex justify-center items-center`}>
                                         {value.length > 0 && value.includes(option.key) && (
                                           <Icon iconName="done" className="!text-lg" />
                                         )}
@@ -504,19 +476,21 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                     </div>
                     {!projectPublish.fetchSettingsLoader && (
                       <div className="relative flex items-center gap-2">
-                        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
+                        <Button variant="neutral-primary" onClick={handleClose}>
+                          Cancel
+                        </Button>
                         {watch("id") ? (
                           <>
                             {isUpdateRequired && (
-                              <PrimaryButton type="submit" loading={isSubmitting}>
+                              <Button variant="primary" type="submit" loading={isSubmitting}>
                                 {isSubmitting ? "Updating..." : "Update settings"}
-                              </PrimaryButton>
+                              </Button>
                             )}
                           </>
                         ) : (
-                          <PrimaryButton type="submit" loading={isSubmitting}>
+                          <Button variant="primary" type="submit" loading={isSubmitting}>
                             {isSubmitting ? "Publishing..." : "Publish"}
-                          </PrimaryButton>
+                          </Button>
                         )}
                       </div>
                     )}
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 3dd6b6b4a..eef46f3ca 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -8,25 +8,20 @@ import { useForm, Controller, useFieldArray } from "react-hook-form";
 
 import { Dialog, Transition } from "@headlessui/react";
 // ui
-import {
-  Avatar,
-  CustomSearchSelect,
-  CustomSelect,
-  PrimaryButton,
-  SecondaryButton,
-} from "components/ui";
+import { Button } from "@plane/ui";
+import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui";
 //icons
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 import { ChevronDownIcon } from "@heroicons/react/20/solid";
 // services
-import projectService from "services/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
 import useToast from "hooks/use-toast";
 // types
-import { ICurrentUserResponse } from "types";
+import { IUser } from "types";
 // fetch-keys
 import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // constants
@@ -36,7 +31,7 @@ type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   members: any[];
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   onSuccess: () => void;
 };
 
@@ -58,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;
 
@@ -178,24 +177,16 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
               <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-80 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div className="space-y-5">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                       Invite Members
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="text-sm text-custom-text-200">
-                        Invite members to work on your project.
-                      </p>
+                      <p className="text-sm text-custom-text-200">Invite members to work on your project.</p>
                     </div>
 
                     <div className="space-y-4 mb-3">
                       {fields.map((field, index) => (
-                        <div
-                          key={field.id}
-                          className="group grid grid-cols-12 gap-x-4 mb-1 text-sm items-start"
-                        >
+                        <div key={field.id} className="group grid grid-cols-12 gap-x-4 mb-1 text-sm items-start">
                           <div className="flex flex-col gap-1 col-span-7">
                             <Controller
                               control={control}
@@ -208,20 +199,11 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                                     <button className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 shadow-sm duration-300 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-80 focus:outline-none px-3 py-2 text-sm text-left">
                                       {value && value !== "" ? (
                                         <div className="flex items-center gap-2">
-                                          <Avatar
-                                            user={
-                                              people?.find((p) => p.member.id === value)?.member
-                                            }
-                                          />
-                                          {
-                                            people?.find((p) => p.member.id === value)?.member
-                                              .display_name
-                                          }
+                                          <Avatar user={people?.find((p) => p.member.id === value)?.member} />
+                                          {people?.find((p) => p.member.id === value)?.member.display_name}
                                         </div>
                                       ) : (
-                                        <div className="flex items-center gap-2 py-0.5">
-                                          Select co-worker
-                                        </div>
+                                        <div className="flex items-center gap-2 py-0.5">Select co-worker</div>
                                       )}
                                       <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
                                     </button>
@@ -306,14 +288,14 @@ const SendProjectInvitationModal: React.FC<Props> = (props) => {
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="neutral-primary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
                         {isSubmitting
-                          ? `${
-                              fields && fields.length > 1 ? "Adding Members..." : "Adding Member..."
-                            }`
+                          ? `${fields && fields.length > 1 ? "Adding Members..." : "Adding Member..."}`
                           : `${fields && fields.length > 1 ? "Add Members" : "Add Member"}`}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </div>
                 </form>
diff --git a/web/components/project/settings/single-label.tsx b/web/components/project/settings/single-label.tsx
index f6ed8be3b..0e2086ccc 100644
--- a/web/components/project/settings/single-label.tsx
+++ b/web/components/project/settings/single-label.tsx
@@ -1,13 +1,10 @@
 import React, { useState } from "react";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// react-color
 import { TwitterPicker } from "react-color";
-// headless ui
 import { Popover, Transition } from "@headlessui/react";
 // ui
-import { CustomMenu, Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { CustomMenu } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // icons
 import { PencilIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
 // types
@@ -29,7 +26,6 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
   const [newLabelForm, setNewLabelForm] = useState(false);
 
   const {
-    register,
     formState: { errors, isSubmitting },
     watch,
     control,
@@ -54,9 +50,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
             <CustomMenu ellipsis>
               {/* <CustomMenu.MenuItem>Convert to group</CustomMenu.MenuItem> */}
               <CustomMenu.MenuItem onClick={() => editLabel(label)}>Edit</CustomMenu.MenuItem>
-              <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>
-                Delete
-              </CustomMenu.MenuItem>
+              <CustomMenu.MenuItem onClick={() => handleLabelDelete(label.id)}>Delete</CustomMenu.MenuItem>
             </CustomMenu>
           </div>
           <div className={`flex items-center gap-2 ${newLabelForm ? "" : "hidden"}`}>
@@ -93,10 +87,7 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
                           name="color"
                           control={control}
                           render={({ field: { value, onChange } }) => (
-                            <TwitterPicker
-                              color={value}
-                              onChange={(value) => onChange(value.hex)}
-                            />
+                            <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
                           )}
                         />
                       </Popover.Panel>
@@ -106,20 +97,33 @@ const SingleLabel: React.FC<Props> = ({ label, issueLabels, editLabel, handleLab
               </Popover>
             </div>
             <div className="flex w-full flex-col justify-center">
-              <Input
-                type="text"
-                id="labelName"
+              <Controller
+                control={control}
                 name="name"
-                register={register}
-                placeholder="Label title"
-                validations={{
+                rules={{
                   required: "Label title is required",
                 }}
-                error={errors.name}
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="labelName"
+                    name="name"
+                    type="text"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.name)}
+                    placeholder="Label title"
+                    className="w-full"
+                  />
+                )}
               />
             </div>
-            <SecondaryButton onClick={() => setNewLabelForm(false)}>Cancel</SecondaryButton>
-            <PrimaryButton loading={isSubmitting}>{isSubmitting ? "Adding" : "Add"}</PrimaryButton>
+            <Button variant="neutral-primary" onClick={() => setNewLabelForm(false)}>
+              Cancel
+            </Button>
+            <Button variant="primary" loading={isSubmitting}>
+              {isSubmitting ? "Adding" : "Add"}
+            </Button>
           </div>
         </div>
       ) : (
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
new file mode 100644
index 000000000..5dad6adda
--- /dev/null
+++ b/web/components/project/sidebar-list-item.tsx
@@ -0,0 +1,347 @@
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
+import { Disclosure, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
+// icons
+import { EllipsisVerticalIcon, LinkIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
+import {
+  ArchiveOutlined,
+  ArticleOutlined,
+  ContrastOutlined,
+  DatasetOutlined,
+  ExpandMoreOutlined,
+  FilterNoneOutlined,
+  PhotoFilterOutlined,
+  SettingsOutlined,
+} from "@mui/icons-material";
+import { PenSquare } from "lucide-react";
+// hooks
+import useToast from "hooks/use-toast";
+// helpers
+import { renderEmoji } from "helpers/emoji.helper";
+// types
+import { IProject } from "types";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+import { RootStore } from "store/root";
+// components
+import { CustomMenu, Icon } from "components/ui";
+import { LeaveProjectModal, DeleteProjectModal } from "components/project";
+import { PublishProjectModal } from "components/project/publish-project";
+import { Tooltip } from "@plane/ui";
+
+type Props = {
+  project: IProject;
+  sidebarCollapse: boolean;
+  provided?: DraggableProvided;
+  snapshot?: DraggableStateSnapshot;
+  handleCopyText: () => void;
+  shortContextMenu?: boolean;
+};
+
+const navigation = (workspaceSlug: string, projectId: string) => [
+  {
+    name: "Issues",
+    href: `/${workspaceSlug}/projects/${projectId}/issues`,
+    Icon: FilterNoneOutlined,
+  },
+  {
+    name: "Cycles",
+    href: `/${workspaceSlug}/projects/${projectId}/cycles`,
+    Icon: ContrastOutlined,
+  },
+  {
+    name: "Modules",
+    href: `/${workspaceSlug}/projects/${projectId}/modules`,
+    Icon: DatasetOutlined,
+  },
+  {
+    name: "Views",
+    href: `/${workspaceSlug}/projects/${projectId}/views`,
+    Icon: PhotoFilterOutlined,
+  },
+  {
+    name: "Pages",
+    href: `/${workspaceSlug}/projects/${projectId}/pages`,
+    Icon: ArticleOutlined,
+  },
+  {
+    name: "Settings",
+    href: `/${workspaceSlug}/projects/${projectId}/settings`,
+    Icon: SettingsOutlined,
+  },
+];
+
+export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
+  const { project, sidebarCollapse, provided, snapshot, handleCopyText, shortContextMenu = false } = props;
+  // store
+  const { projectPublish, project: projectStore }: RootStore = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // toast
+  const { setToastAlert } = useToast();
+  // states
+  const [leaveProjectModalOpen, setLeaveProjectModal] = useState(false);
+  const [deleteProjectModalOpen, setDeleteProjectModal] = useState(false);
+
+  const isAdmin = project.member_role === 20;
+  const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug) return;
+
+    projectStore.addProjectToFavorites(workspaceSlug.toString(), project.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug) return;
+
+    projectStore.removeProjectFromFavorites(workspaceSlug.toString(), project.id).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Couldn't remove the project from favorites. Please try again.",
+      });
+    });
+  };
+
+  const handleLeaveProject = () => {
+    setLeaveProjectModal(true);
+  };
+
+  const handleLeaveProjectModalClose = () => {
+    setLeaveProjectModal(false);
+  };
+
+  const handleDeleteProjectClick = () => {
+    setDeleteProjectModal(true);
+  };
+
+  const handleDeleteProjectModalClose = () => {
+    setDeleteProjectModal(false);
+    router.push(`/${workspaceSlug}/projects`);
+  };
+
+  return (
+    <>
+      <PublishProjectModal />
+      <DeleteProjectModal project={project} isOpen={deleteProjectModalOpen} onClose={handleDeleteProjectModalClose} />
+      <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={handleLeaveProjectModalClose} />
+      <Disclosure key={project.id} defaultOpen={projectId === project.id}>
+        {({ open }) => (
+          <>
+            <div
+              className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
+                snapshot?.isDragging ? "opacity-60" : ""
+              }`}
+            >
+              {provided && (
+                <Tooltip
+                  tooltipContent={project.sort_order === null ? "Join the project to rearrange" : "Drag to rearrange"}
+                  position="top-right"
+                >
+                  <button
+                    type="button"
+                    className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
+                      sidebarCollapse ? "" : "group-hover:!flex"
+                    } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
+                    {...provided?.dragHandleProps}
+                  >
+                    <EllipsisVerticalIcon className="h-4" />
+                    <EllipsisVerticalIcon className="-ml-5 h-4" />
+                  </button>
+                </Tooltip>
+              )}
+              <Tooltip tooltipContent={`${project.name}`} position="right" className="ml-2" disabled={!sidebarCollapse}>
+                <Disclosure.Button
+                  as="div"
+                  className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
+                    sidebarCollapse ? "justify-center" : `justify-between`
+                  }`}
+                >
+                  <div
+                    className={`flex items-center flex-grow w-full truncate gap-x-2 ${
+                      sidebarCollapse ? "justify-center" : ""
+                    }`}
+                  >
+                    {project.emoji ? (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
+                        {renderEmoji(project.emoji)}
+                      </span>
+                    ) : project.icon_prop ? (
+                      <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
+                        {renderEmoji(project.icon_prop)}
+                      </div>
+                    ) : (
+                      <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
+                        {project?.name.charAt(0)}
+                      </span>
+                    )}
+
+                    {!sidebarCollapse && (
+                      <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>{project.name}</p>
+                    )}
+                  </div>
+                  {!sidebarCollapse && (
+                    <ExpandMoreOutlined
+                      fontSize="small"
+                      className={`flex-shrink-0 ${
+                        open ? "rotate-180" : ""
+                      } !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
+                    />
+                  )}
+                </Disclosure.Button>
+              </Tooltip>
+
+              {!sidebarCollapse && (
+                <CustomMenu
+                  className="hidden group-hover:block flex-shrink-0"
+                  buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
+                  ellipsis
+                >
+                  {!shortContextMenu && isAdmin && (
+                    <CustomMenu.MenuItem onClick={handleDeleteProjectClick}>
+                      <span className="flex items-center justify-start gap-2 ">
+                        <TrashIcon className="h-4 w-4" />
+                        <span>Delete project</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  )}
+                  {!project.is_favorite && (
+                    <CustomMenu.MenuItem onClick={handleAddToFavorites}>
+                      <span className="flex items-center justify-start gap-2">
+                        <StarIcon className="h-4 w-4" />
+                        <span>Add to favorites</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  )}
+                  {project.is_favorite && (
+                    <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
+                      <span className="flex items-center justify-start gap-2">
+                        <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
+                        <span>Remove from favorites</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  )}
+                  <CustomMenu.MenuItem onClick={handleCopyText}>
+                    <span className="flex items-center justify-start gap-2">
+                      <LinkIcon className="h-4 w-4" />
+                      <span>Copy project link</span>
+                    </span>
+                  </CustomMenu.MenuItem>
+
+                  {/* publish project settings */}
+                  {isAdmin && (
+                    <CustomMenu.MenuItem onClick={() => projectPublish.handleProjectModal(project?.id)}>
+                      <div className="flex-shrink-0 relative flex items-center justify-start gap-2">
+                        <div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
+                          <Icon iconName="ios_share" className="!text-base" />
+                        </div>
+                        <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+
+                  {project.archive_in > 0 && (
+                    <CustomMenu.MenuItem
+                      onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)}
+                    >
+                      <div className="flex items-center justify-start gap-2">
+                        <ArchiveOutlined fontSize="small" />
+                        <span>Archived Issues</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+                  <CustomMenu.MenuItem
+                    onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/draft-issues`)}
+                  >
+                    <div className="flex items-center justify-start gap-2">
+                      <PenSquare className="!text-base !leading-4 w-[14px] h-[14px] text-custom-text-300" />
+                      <span>Draft Issues</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+                  <CustomMenu.MenuItem
+                    onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
+                  >
+                    <div className="flex items-center justify-start gap-2">
+                      <Icon iconName="settings" className="!text-base !leading-4" />
+                      <span>Settings</span>
+                    </div>
+                  </CustomMenu.MenuItem>
+
+                  {/* leave project */}
+                  {isViewerOrGuest && (
+                    <CustomMenu.MenuItem onClick={handleLeaveProject}>
+                      <div className="flex items-center justify-start gap-2">
+                        <Icon iconName="logout" className="!text-base !leading-4" />
+                        <span>Leave Project</span>
+                      </div>
+                    </CustomMenu.MenuItem>
+                  )}
+                </CustomMenu>
+              )}
+            </div>
+
+            <Transition
+              enter="transition duration-100 ease-out"
+              enterFrom="transform scale-95 opacity-0"
+              enterTo="transform scale-100 opacity-100"
+              leave="transition duration-75 ease-out"
+              leaveFrom="transform scale-100 opacity-100"
+              leaveTo="transform scale-95 opacity-0"
+            >
+              <Disclosure.Panel className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
+                {navigation(workspaceSlug as string, project?.id).map((item) => {
+                  if (
+                    (item.name === "Cycles" && !project.cycle_view) ||
+                    (item.name === "Modules" && !project.module_view) ||
+                    (item.name === "Views" && !project.issue_views_view) ||
+                    (item.name === "Pages" && !project.page_view)
+                  )
+                    return;
+
+                  return (
+                    <Link key={item.name} href={item.href}>
+                      <a className="block w-full">
+                        <Tooltip
+                          tooltipContent={`${project?.name}: ${item.name}`}
+                          position="right"
+                          className="ml-2"
+                          disabled={!sidebarCollapse}
+                        >
+                          <div
+                            className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
+                              router.asPath.includes(item.href)
+                                ? "bg-custom-primary-100/10 text-custom-primary-100"
+                                : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
+                            } ${sidebarCollapse ? "justify-center" : ""}`}
+                          >
+                            <item.Icon
+                              sx={{
+                                fontSize: 18,
+                              }}
+                            />
+                            {!sidebarCollapse && item.name}
+                          </div>
+                        </Tooltip>
+                      </a>
+                    </Link>
+                  );
+                })}
+              </Disclosure.Panel>
+            </Transition>
+          </>
+        )}
+      </Disclosure>
+    </>
+  );
+});
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index a46a97f04..e79a87b01 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -1,20 +1,15 @@
 import React, { useState, FC, useRef, useEffect } from "react";
-
 import { useRouter } from "next/router";
-import { mutate } from "swr";
-
-// react-beautiful-dnd
+import useSWR from "swr";
 import { DragDropContext, Draggable, DropResult, Droppable } from "react-beautiful-dnd";
-// headless ui
 import { Disclosure, Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
-import useProjects from "hooks/use-projects";
 // components
-import { CreateProjectModal, DeleteProjectModal, SingleSidebarProject } from "components/project";
-// services
-import projectService from "services/project.service";
+import { CreateProjectModal, ProjectSidebarListItem } from "components/project";
+
 // icons
 import { Icon } from "components/ui";
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -23,35 +18,32 @@ import { copyTextToClipboard } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
 import { IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 
-export const ProjectSidebarList: FC = () => {
-  const store: any = useMobxStore();
-
-  const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false);
-  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
-  const [deleteProjectModal, setDeleteProjectModal] = useState(false);
-  const [projectToDelete, setProjectToDelete] = useState<IProject | null>(null);
-  const [projectToLeaveId, setProjectToLeaveId] = useState<string | null>(null);
-
+export const ProjectSidebarList: FC = observer(() => {
+  const { theme: themeStore, project: projectStore } = useMobxStore();
   // router
-  const [isScrolled, setIsScrolled] = useState(false);
-
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
+  // swr
+  useSWR(
+    workspaceSlug ? "PROJECTS_LIST" : null,
+    workspaceSlug ? () => projectStore.fetchProjects(workspaceSlug?.toString()) : null
+  );
+  // states
+  const [isFavoriteProjectCreate, setIsFavoriteProjectCreate] = useState(false);
+  const [isProjectModalOpen, setIsProjectModalOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false); // scroll animation state
+  // refs
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  // user
   const { user } = useUserAuth();
+  // toast
   const { setToastAlert } = useToast();
 
-  const { projects: allProjects } = useProjects();
-
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-  const favoriteProjects = allProjects?.filter((p) => p.is_favorite);
+  const joinedProjects = workspaceSlug && projectStore.joinedProjects;
+  const favoriteProjects = workspaceSlug && projectStore.favoriteProjects;
 
   const orderedJoinedProjects: IProject[] | undefined = joinedProjects
     ? orderArrayBy(joinedProjects, "sort_order", "ascending")
@@ -61,14 +53,8 @@ export const ProjectSidebarList: FC = () => {
     ? orderArrayBy(favoriteProjects, "sort_order", "ascending")
     : undefined;
 
-  const handleDeleteProject = (project: IProject) => {
-    setProjectToDelete(project);
-    setDeleteProjectModal(true);
-  };
-
   const handleCopyText = (projectId: string) => {
-    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/${projectId}/issues`).then(() => {
       setToastAlert({
         type: "success",
@@ -85,39 +71,10 @@ export const ProjectSidebarList: FC = () => {
 
     if (source.index === destination.index) return;
 
-    const projectsList =
-      (destination.droppableId === "joined-projects"
-        ? orderedJoinedProjects
-        : orderedFavProjects) ?? [];
+    const updatedSortOrder = projectStore.orderProjectsWithSortOrder(source.index, destination.index, draggableId);
 
-    let updatedSortOrder = projectsList[source.index].sort_order;
-
-    if (destination.index === 0) updatedSortOrder = (projectsList[0].sort_order as number) - 1000;
-    else if (destination.index === projectsList.length - 1)
-      updatedSortOrder = (projectsList[projectsList.length - 1].sort_order as number) + 1000;
-    else {
-      const destinationSortingOrder = projectsList[destination.index].sort_order as number;
-      const relativeDestinationSortingOrder =
-        source.index < destination.index
-          ? (projectsList[destination.index + 1].sort_order as number)
-          : (projectsList[destination.index - 1].sort_order as number);
-
-      updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
-    }
-
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) => {
-        if (!prevData) return prevData;
-        return prevData.map((p) =>
-          p.id === draggableId ? { ...p, sort_order: updatedSortOrder } : p
-        );
-      },
-      false
-    );
-
-    await projectService
-      .setProjectView(workspaceSlug as string, draggableId, { sort_order: updatedSortOrder })
+    projectStore
+      .updateProjectView(workspaceSlug.toString(), draggableId, { sort_order: updatedSortOrder })
       .catch(() => {
         setToastAlert({
           type: "error",
@@ -127,20 +84,20 @@ export const ProjectSidebarList: FC = () => {
       });
   };
 
-  const handleScroll = () => {
-    if (containerRef.current) {
-      const scrollTop = containerRef.current.scrollTop;
-      setIsScrolled(scrollTop > 0);
-    }
-  };
-
+  /**
+   * Implementing scroll animation styles based on the scroll length of the container
+   */
   useEffect(() => {
+    const handleScroll = () => {
+      if (containerRef.current) {
+        const scrollTop = containerRef.current.scrollTop;
+        setIsScrolled(scrollTop > 0);
+      }
+    };
     const currentContainerRef = containerRef.current;
-
     if (currentContainerRef) {
       currentContainerRef.addEventListener("scroll", handleScroll);
     }
-
     return () => {
       if (currentContainerRef) {
         currentContainerRef.removeEventListener("scroll", handleScroll);
@@ -156,12 +113,6 @@ export const ProjectSidebarList: FC = () => {
         setToFavorite={isFavoriteProjectCreate}
         user={user}
       />
-      <DeleteProjectModal
-        isOpen={deleteProjectModal}
-        onClose={() => setDeleteProjectModal(false)}
-        data={projectToDelete}
-        user={user}
-      />
       <div
         ref={containerRef}
         className={`h-full overflow-y-auto px-4 space-y-3 pt-3 ${
@@ -176,7 +127,7 @@ export const ProjectSidebarList: FC = () => {
                   <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
                     {({ open }) => (
                       <>
-                        {!store?.theme?.sidebarCollapsed && (
+                        {!themeStore?.sidebarCollapsed && (
                           <div className="group flex justify-between items-center text-xs px-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
                             <Disclosure.Button
                               as="button"
@@ -210,15 +161,13 @@ export const ProjectSidebarList: FC = () => {
                             >
                               {(provided, snapshot) => (
                                 <div ref={provided.innerRef} {...provided.draggableProps}>
-                                  <SingleSidebarProject
+                                  <ProjectSidebarListItem
                                     key={project.id}
                                     project={project}
-                                    sidebarCollapse={store?.theme?.sidebarCollapsed}
+                                    sidebarCollapse={themeStore?.sidebarCollapsed || false}
                                     provided={provided}
                                     snapshot={snapshot}
-                                    handleDeleteProject={() => handleDeleteProject(project)}
                                     handleCopyText={() => handleCopyText(project.id)}
-                                    handleProjectLeave={() => setProjectToLeaveId(project.id)}
                                     shortContextMenu
                                   />
                                 </div>
@@ -243,7 +192,7 @@ export const ProjectSidebarList: FC = () => {
                   <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
                     {({ open }) => (
                       <>
-                        {!store?.theme?.sidebarCollapsed && (
+                        {!themeStore?.sidebarCollapsed && (
                           <div className="group flex justify-between items-center text-xs px-1.5 rounded text-custom-sidebar-text-400 hover:bg-custom-sidebar-background-80 w-full">
                             <Disclosure.Button
                               as="button"
@@ -280,14 +229,12 @@ export const ProjectSidebarList: FC = () => {
                               <Draggable key={project.id} draggableId={project.id} index={index}>
                                 {(provided, snapshot) => (
                                   <div ref={provided.innerRef} {...provided.draggableProps}>
-                                    <SingleSidebarProject
+                                    <ProjectSidebarListItem
                                       key={project.id}
                                       project={project}
-                                      sidebarCollapse={store?.theme?.sidebarCollapsed}
+                                      sidebarCollapse={themeStore?.sidebarCollapsed || false}
                                       provided={provided}
                                       snapshot={snapshot}
-                                      handleDeleteProject={() => handleDeleteProject(project)}
-                                      handleProjectLeave={() => setProjectToLeaveId(project.id)}
                                       handleCopyText={() => handleCopyText(project.id)}
                                     />
                                   </div>
@@ -318,10 +265,10 @@ export const ProjectSidebarList: FC = () => {
             }}
           >
             <PlusIcon className="h-5 w-5" />
-            {!store?.theme?.sidebarCollapsed && "Add Project"}
+            {!themeStore?.sidebarCollapsed && "Add Project"}
           </button>
         )}
       </div>
     </>
   );
-};
+});
diff --git a/web/components/project/single-integration-card.tsx b/web/components/project/single-integration-card.tsx
index e7095e9ad..ae916c782 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";
+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;
@@ -44,11 +47,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
     projectId ? PROJECT_GITHUB_REPOSITORY(projectId as string) : null,
     () =>
       workspaceSlug && projectId && integration
-        ? projectService.getProjectGithubRepository(
-            workspaceSlug as string,
-            projectId as string,
-            integration.id
-          )
+        ? projectService.getProjectGithubRepository(workspaceSlug as string, projectId as string, integration.id)
         : null
   );
 
@@ -101,9 +100,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
               />
             </div>
             <div>
-              <h3 className="flex items-center gap-4 text-sm font-medium">
-                {integration.integration_detail.title}
-              </h3>
+              <h3 className="flex items-center gap-4 text-sm font-medium">{integration.integration_detail.title}</h3>
               <p className="text-sm text-custom-text-200 tracking-tight">
                 {integrationDetails[integration.integration_detail.provider].description}
               </p>
@@ -125,9 +122,7 @@ export const SingleIntegration: React.FC<Props> = ({ integration }) => {
               onChange={handleChange}
             />
           )}
-          {integration.integration_detail.provider === "slack" && (
-            <SelectChannel integration={integration} />
-          )}
+          {integration.integration_detail.provider === "slack" && <SelectChannel integration={integration} />}
         </div>
       )}
     </>
diff --git a/web/components/project/single-project-card.tsx b/web/components/project/single-project-card.tsx
deleted file mode 100644
index eb88e7381..000000000
--- a/web/components/project/single-project-card.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-import React from "react";
-
-import { useRouter } from "next/router";
-import Link from "next/link";
-
-import { mutate } from "swr";
-
-// services
-import projectService from "services/project.service";
-// 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";
-// helpers
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
-import { copyTextToClipboard, truncateText } from "helpers/string.helper";
-import { renderEmoji } from "helpers/emoji.helper";
-// types
-import type { IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
-
-export type ProjectCardProps = {
-  project: IProject;
-  setToJoinProject: (id: string | null) => void;
-  setDeleteProject: (id: string | null) => void;
-};
-
-export const SingleProjectCard: React.FC<ProjectCardProps> = ({
-  project,
-  setToJoinProject,
-  setDeleteProject,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const isOwner = project.member_role === 20;
-  const isMember = project.member_role === 15;
-
-  const handleAddToFavorites = () => {
-    if (!workspaceSlug) return;
-
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)),
-      false
-    );
-
-    projectService
-      .addProjectToFavorites(workspaceSlug as string, {
-        project: project.id,
-      })
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Successfully added the project to favorites.",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't remove the project from favorites. Please try again.",
-        });
-      });
-  };
-
-  const handleRemoveFromFavorites = () => {
-    if (!workspaceSlug || !project) return;
-
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)),
-      false
-    );
-
-    projectService
-      .removeProjectFromFavorites(workspaceSlug as string, project.id)
-      .then(() => {
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Successfully removed the project from favorites.",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't remove the project from favorites. Please try again.",
-        });
-      });
-  };
-
-  const handleCopyText = () => {
-    const originURL =
-      typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
-
-    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${project.id}/issues`).then(() => {
-      setToastAlert({
-        type: "success",
-        title: "Link Copied!",
-        message: "Project link copied to clipboard.",
-      });
-    });
-  };
-
-  return (
-    <>
-      <div className="flex flex-col rounded-[10px] bg-custom-background-90 shadow">
-        <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
-          <a>
-            <div className="relative h-32 w-full rounded-t-[10px]">
-              <img
-                src={
-                  project.cover_image ??
-                  "https://images.unsplash.com/photo-1672243775941-10d763d9adef?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
-                }
-                alt={project.name}
-                className="absolute top-0 left-0 h-full w-full object-cover rounded-t-[10px]"
-              />
-              <div className="absolute bottom-4 left-4 flex items-center gap-3 text-white">
-                {!project.is_member ? (
-                  <button
-                    type="button"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      setToJoinProject(project.id);
-                    }}
-                    className="flex cursor-pointer items-center gap-1 rounded bg-green-600 px-2 py-1 text-xs"
-                  >
-                    <PlusIcon className="h-3 w-3" />
-                    <span>Select to Join</span>
-                  </button>
-                ) : (
-                  <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">
-                    <StarIcon className="h-3 w-3" />
-                  </span>
-                )}
-              </div>
-            </div>
-          </a>
-        </Link>
-        <div className="flex h-full flex-col rounded-b-[10px] p-4 text-custom-text-200">
-          <Link href={`/${workspaceSlug as string}/projects/${project.id}/issues`}>
-            <a>
-              <div className="flex items-center gap-1">
-                <h3 className="text-1.5xl font-medium text-custom-text-100">{project.name}</h3>
-                {project.emoji ? (
-                  <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                    {renderEmoji(project.emoji)}
-                  </span>
-                ) : project.icon_prop ? (
-                  renderEmoji(project.icon_prop)
-                ) : null}
-              </div>
-              <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">
-            <Tooltip
-              tooltipContent={`Created at ${renderShortDateWithYearFormat(project.created_at)}`}
-              position="bottom"
-            >
-              <div className="flex cursor-default items-center gap-1.5 text-xs">
-                <CalendarDaysIcon className="h-4 w-4" />
-                {renderShortDateWithYearFormat(project.created_at)}
-              </div>
-            </Tooltip>
-            {project.is_member ? (
-              <div className="flex items-center">
-                {(isOwner || isMember) && (
-                  <Link href={`/${workspaceSlug}/projects/${project.id}/settings`}>
-                    <a className="grid cursor-pointer place-items-center rounded p-1 duration-300 hover:bg-custom-background-90">
-                      <PencilIcon className="h-4 w-4" />
-                    </a>
-                  </Link>
-                )}
-                <CustomMenu width="auto" verticalEllipsis>
-                  {isOwner && (
-                    <CustomMenu.MenuItem onClick={() => setDeleteProject(project.id)}>
-                      <span className="flex items-center justify-start gap-2">
-                        <TrashIcon className="h-4 w-4" />
-                        <span>Delete project</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  )}
-                  {project.is_favorite ? (
-                    <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
-                      <span className="flex items-center justify-start gap-2">
-                        <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                        <span>Remove from favorites</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  ) : (
-                    <CustomMenu.MenuItem onClick={handleAddToFavorites}>
-                      <span className="flex items-center justify-start gap-2">
-                        <StarIcon className="h-4 w-4" />
-                        <span>Add to favorites</span>
-                      </span>
-                    </CustomMenu.MenuItem>
-                  )}
-                  <CustomMenu.MenuItem onClick={handleCopyText}>
-                    <span className="flex items-center justify-start gap-2">
-                      <LinkIcon className="h-4 w-4" />
-                      <span>Copy project link</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                </CustomMenu>
-              </div>
-            ) : null}
-          </div>
-        </div>
-      </div>
-    </>
-  );
-};
diff --git a/web/components/project/single-sidebar-project.tsx b/web/components/project/single-sidebar-project.tsx
deleted file mode 100644
index d43a82064..000000000
--- a/web/components/project/single-sidebar-project.tsx
+++ /dev/null
@@ -1,384 +0,0 @@
-import Link from "next/link";
-import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// react-beautiful-dnd
-import { DraggableProvided, DraggableStateSnapshot } from "react-beautiful-dnd";
-// headless ui
-import { Disclosure, Transition } from "@headlessui/react";
-// services
-import projectService from "services/project.service";
-// hooks
-import useToast from "hooks/use-toast";
-// ui
-import { CustomMenu, Icon, Tooltip } from "components/ui";
-// icons
-import { EllipsisVerticalIcon, LinkIcon, StarIcon, TrashIcon } from "@heroicons/react/24/outline";
-import {
-  ArchiveOutlined,
-  ArticleOutlined,
-  ContrastOutlined,
-  DatasetOutlined,
-  ExpandMoreOutlined,
-  FilterNoneOutlined,
-  PhotoFilterOutlined,
-  SettingsOutlined,
-} from "@mui/icons-material";
-import { PenSquare } from "lucide-react";
-// helpers
-import { renderEmoji } from "helpers/emoji.helper";
-// types
-import { IProject } from "types";
-// fetch-keys
-import { PROJECTS_LIST } from "constants/fetch-keys";
-// mobx react lite
-import { observer } from "mobx-react-lite";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-import { RootStore } from "store/root";
-
-type Props = {
-  project: IProject;
-  sidebarCollapse: boolean;
-  provided?: DraggableProvided;
-  snapshot?: DraggableStateSnapshot;
-  handleDeleteProject: () => void;
-  handleCopyText: () => void;
-  handleProjectLeave: () => void;
-  shortContextMenu?: boolean;
-};
-
-const navigation = (workspaceSlug: string, projectId: string) => [
-  {
-    name: "Issues",
-    href: `/${workspaceSlug}/projects/${projectId}/issues`,
-    Icon: FilterNoneOutlined,
-  },
-  {
-    name: "Cycles",
-    href: `/${workspaceSlug}/projects/${projectId}/cycles`,
-    Icon: ContrastOutlined,
-  },
-  {
-    name: "Modules",
-    href: `/${workspaceSlug}/projects/${projectId}/modules`,
-    Icon: DatasetOutlined,
-  },
-  {
-    name: "Views",
-    href: `/${workspaceSlug}/projects/${projectId}/views`,
-    Icon: PhotoFilterOutlined,
-  },
-  {
-    name: "Pages",
-    href: `/${workspaceSlug}/projects/${projectId}/pages`,
-    Icon: ArticleOutlined,
-  },
-  {
-    name: "Settings",
-    href: `/${workspaceSlug}/projects/${projectId}/settings`,
-    Icon: SettingsOutlined,
-  },
-];
-
-export const SingleSidebarProject: React.FC<Props> = observer((props) => {
-  const {
-    project,
-    sidebarCollapse,
-    provided,
-    snapshot,
-    handleDeleteProject,
-    handleCopyText,
-    handleProjectLeave,
-    shortContextMenu = false,
-  } = props;
-
-  const store: RootStore = useMobxStore();
-  const { projectPublish, project: projectStore } = store;
-
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
-
-  const { setToastAlert } = useToast();
-
-  const isAdmin = project.member_role === 20;
-
-  const isViewerOrGuest = project.member_role === 10 || project.member_role === 5;
-
-  const handleAddToFavorites = () => {
-    if (!workspaceSlug) return;
-
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: true } : p)),
-      false
-    );
-
-    projectService
-      .addProjectToFavorites(workspaceSlug as string, {
-        project: project.id,
-      })
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Couldn't remove the project from favorites. Please try again.",
-        })
-      );
-  };
-
-  const handleRemoveFromFavorites = () => {
-    if (!workspaceSlug) return;
-
-    mutate<IProject[]>(
-      PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === project.id ? { ...p, is_favorite: false } : p)),
-      false
-    );
-
-    projectService.removeProjectFromFavorites(workspaceSlug as string, project.id).catch(() =>
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message: "Couldn't remove the project from favorites. Please try again.",
-      })
-    );
-  };
-
-  return (
-    <Disclosure key={project.id} defaultOpen={projectId === project.id}>
-      {({ open }) => (
-        <>
-          <div
-            className={`group relative text-custom-sidebar-text-10 px-2 py-1 w-full flex items-center hover:bg-custom-sidebar-background-80 rounded-md ${
-              snapshot?.isDragging ? "opacity-60" : ""
-            }`}
-          >
-            {provided && (
-              <Tooltip
-                tooltipContent={
-                  project.sort_order === null
-                    ? "Join the project to rearrange"
-                    : "Drag to rearrange"
-                }
-                position="top-right"
-              >
-                <button
-                  type="button"
-                  className={`absolute top-1/2 -translate-y-1/2 -left-4 hidden rounded p-0.5 text-custom-sidebar-text-400 ${
-                    sidebarCollapse ? "" : "group-hover:!flex"
-                  } ${project.sort_order === null ? "opacity-60 cursor-not-allowed" : ""}`}
-                  {...provided?.dragHandleProps}
-                >
-                  <EllipsisVerticalIcon className="h-4" />
-                  <EllipsisVerticalIcon className="-ml-5 h-4" />
-                </button>
-              </Tooltip>
-            )}
-            <Tooltip
-              tooltipContent={`${project.name}`}
-              position="right"
-              className="ml-2"
-              disabled={!sidebarCollapse}
-            >
-              <Disclosure.Button
-                as="div"
-                className={`flex items-center flex-grow truncate cursor-pointer select-none text-left text-sm font-medium ${
-                  sidebarCollapse ? "justify-center" : `justify-between`
-                }`}
-              >
-                <div
-                  className={`flex items-center flex-grow w-full truncate gap-x-2 ${
-                    sidebarCollapse ? "justify-center" : ""
-                  }`}
-                >
-                  {project.emoji ? (
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
-                      {renderEmoji(project.emoji)}
-                    </span>
-                  ) : project.icon_prop ? (
-                    <div className="h-7 w-7 flex-shrink-0 grid place-items-center">
-                      {renderEmoji(project.icon_prop)}
-                    </div>
-                  ) : (
-                    <span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded bg-gray-700 uppercase text-white">
-                      {project?.name.charAt(0)}
-                    </span>
-                  )}
-
-                  {!sidebarCollapse && (
-                    <p className={`truncate ${open ? "" : "text-custom-sidebar-text-200"}`}>
-                      {project.name}
-                    </p>
-                  )}
-                </div>
-                {!sidebarCollapse && (
-                  <ExpandMoreOutlined
-                    fontSize="small"
-                    className={`flex-shrink-0 ${
-                      open ? "rotate-180" : ""
-                    } !hidden group-hover:!block text-custom-sidebar-text-400 duration-300`}
-                  />
-                )}
-              </Disclosure.Button>
-            </Tooltip>
-
-            {!sidebarCollapse && (
-              <CustomMenu
-                className="hidden group-hover:block flex-shrink-0"
-                buttonClassName="!text-custom-sidebar-text-400 hover:text-custom-sidebar-text-400"
-                ellipsis
-              >
-                {!shortContextMenu && isAdmin && (
-                  <CustomMenu.MenuItem onClick={handleDeleteProject}>
-                    <span className="flex items-center justify-start gap-2 ">
-                      <TrashIcon className="h-4 w-4" />
-                      <span>Delete project</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                )}
-                {!project.is_favorite && (
-                  <CustomMenu.MenuItem onClick={handleAddToFavorites}>
-                    <span className="flex items-center justify-start gap-2">
-                      <StarIcon className="h-4 w-4" />
-                      <span>Add to favorites</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                )}
-                {project.is_favorite && (
-                  <CustomMenu.MenuItem onClick={handleRemoveFromFavorites}>
-                    <span className="flex items-center justify-start gap-2">
-                      <StarIcon className="h-4 w-4 text-orange-400" fill="#f6ad55" />
-                      <span>Remove from favorites</span>
-                    </span>
-                  </CustomMenu.MenuItem>
-                )}
-                <CustomMenu.MenuItem onClick={handleCopyText}>
-                  <span className="flex items-center justify-start gap-2">
-                    <LinkIcon className="h-4 w-4" />
-                    <span>Copy project link</span>
-                  </span>
-                </CustomMenu.MenuItem>
-
-                {/* publish project settings */}
-                {isAdmin && (
-                  <CustomMenu.MenuItem
-                    onClick={() => projectPublish.handleProjectModal(project?.id)}
-                  >
-                    <div className="flex-shrink-0 relative flex items-center justify-start gap-2">
-                      <div className="rounded transition-all w-4 h-4 flex justify-center items-center text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 duration-300 cursor-pointer">
-                        <Icon iconName="ios_share" className="!text-base" />
-                      </div>
-                      <div>{project.is_deployed ? "Publish settings" : "Publish"}</div>
-                    </div>
-                  </CustomMenu.MenuItem>
-                )}
-
-                {project.archive_in > 0 && (
-                  <CustomMenu.MenuItem
-                    onClick={() =>
-                      router.push(`/${workspaceSlug}/projects/${project?.id}/archived-issues/`)
-                    }
-                  >
-                    <div className="flex items-center justify-start gap-2">
-                      <ArchiveOutlined fontSize="small" />
-                      <span>Archived Issues</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                )}
-                <CustomMenu.MenuItem
-                  onClick={() =>
-                    router.push(`/${workspaceSlug}/projects/${project?.id}/draft-issues`)
-                  }
-                >
-                  <div className="flex items-center justify-start gap-2">
-                    <PenSquare className="!text-base !leading-4 w-[14px] h-[14px] text-custom-text-300" />
-                    <span>Draft Issues</span>
-                  </div>
-                </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem
-                  onClick={() => router.push(`/${workspaceSlug}/projects/${project?.id}/settings`)}
-                >
-                  <div className="flex items-center justify-start gap-2">
-                    <Icon iconName="settings" className="!text-base !leading-4" />
-                    <span>Settings</span>
-                  </div>
-                </CustomMenu.MenuItem>
-
-                {/* leave project */}
-                {isViewerOrGuest && (
-                  <CustomMenu.MenuItem
-                    onClick={() =>
-                      projectStore.handleProjectLeaveModal({
-                        id: project?.id,
-                        name: project?.name,
-                        workspaceSlug: workspaceSlug as string,
-                      })
-                    }
-                  >
-                    <div className="flex items-center justify-start gap-2">
-                      <Icon iconName="logout" className="!text-base !leading-4" />
-                      <span>Leave Project</span>
-                    </div>
-                  </CustomMenu.MenuItem>
-                )}
-              </CustomMenu>
-            )}
-          </div>
-
-          <Transition
-            enter="transition duration-100 ease-out"
-            enterFrom="transform scale-95 opacity-0"
-            enterTo="transform scale-100 opacity-100"
-            leave="transition duration-75 ease-out"
-            leaveFrom="transform scale-100 opacity-100"
-            leaveTo="transform scale-95 opacity-0"
-          >
-            <Disclosure.Panel className={`space-y-2 mt-1 ${sidebarCollapse ? "" : "ml-[2.25rem]"}`}>
-              {navigation(workspaceSlug as string, project?.id).map((item) => {
-                if (
-                  (item.name === "Cycles" && !project.cycle_view) ||
-                  (item.name === "Modules" && !project.module_view) ||
-                  (item.name === "Views" && !project.issue_views_view) ||
-                  (item.name === "Pages" && !project.page_view)
-                )
-                  return;
-
-                return (
-                  <Link key={item.name} href={item.href}>
-                    <a className="block w-full">
-                      <Tooltip
-                        tooltipContent={`${project?.name}: ${item.name}`}
-                        position="right"
-                        className="ml-2"
-                        disabled={!sidebarCollapse}
-                      >
-                        <div
-                          className={`group flex items-center rounded-md px-2 py-1.5 gap-2.5 text-xs font-medium outline-none ${
-                            router.asPath.includes(item.href)
-                              ? "bg-custom-primary-100/10 text-custom-primary-100"
-                              : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                          } ${sidebarCollapse ? "justify-center" : ""}`}
-                        >
-                          <item.Icon
-                            sx={{
-                              fontSize: 18,
-                            }}
-                          />
-                          {!sidebarCollapse && item.name}
-                        </div>
-                      </Tooltip>
-                    </a>
-                  </Link>
-                );
-              })}
-            </Disclosure.Panel>
-          </Transition>
-        </>
-      )}
-    </Disclosure>
-  );
-});
diff --git a/web/components/search-listbox/index.tsx b/web/components/search-listbox/index.tsx
deleted file mode 100644
index bd60deaab..000000000
--- a/web/components/search-listbox/index.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import React, { useState } from "react";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// headless ui
-import { Transition, Combobox } from "@headlessui/react";
-// services
-import workspaceService from "services/workspace.service";
-// types
-import type { Props } from "./types";
-// fetch-keys
-import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
-
-const SearchListbox: React.FC<Props> = ({
-  title,
-  options,
-  onChange,
-  value,
-  multiple: canSelectMultiple,
-  icon,
-  optionsFontsize,
-  buttonClassName,
-  optionsClassName,
-  assignee = false,
-}) => {
-  const [query, setQuery] = useState("");
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const filteredOptions =
-    query === ""
-      ? options
-      : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
-
-  const props: any = {
-    value,
-    onChange,
-  };
-
-  if (canSelectMultiple) {
-    props.value = props.value ?? [];
-    props.onChange = (value: string[]) => {
-      onChange(value);
-    };
-    props.multiple = true;
-  }
-
-  const { data: people } = useSWR(
-    workspaceSlug ? WORKSPACE_MEMBERS(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.workspaceMembers(workspaceSlug as string) : null
-  );
-
-  const userAvatar = (userId: string) => {
-    const user = people?.find((p) => p.member.id === userId);
-
-    if (!user) return;
-
-    if (user.member.avatar && user.member.avatar !== "") {
-      return (
-        <div className="relative h-4 w-4">
-          <img
-            src={user.member.avatar}
-            className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
-            alt="avatar"
-          />
-        </div>
-      );
-    } else
-      return (
-        <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-          {user.member.display_name.charAt(0)}
-        </div>
-      );
-  };
-
-  return (
-    <Combobox as="div" {...props} className="relative flex-shrink-0">
-      {({ open }: any) => (
-        <>
-          <Combobox.Label className="sr-only">{title}</Combobox.Label>
-          <Combobox.Button
-            className={`flex cursor-pointer items-center gap-1 rounded-md border  border-custom-border-200 px-2 py-1 text-xs shadow-sm duration-300 hover:bg-custom-background-90 focus:border-custom-primary focus:outline-none focus:ring-1 focus:ring-custom-primary ${
-              buttonClassName || ""
-            }`}
-          >
-            {icon ?? null}
-            <span
-              className={`hidden truncate sm:block ${
-                value === null || value === undefined ? "" : "text-custom-text-100"
-              }`}
-            >
-              {Array.isArray(value)
-                ? value
-                    .map((v) => options?.find((option) => option.value === v)?.display)
-                    .join(", ") || title
-                : options?.find((option) => option.value === value)?.display || title}
-            </span>
-          </Combobox.Button>
-
-          <Transition
-            show={open}
-            as={React.Fragment}
-            leave="transition ease-in duration-100"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Combobox.Options
-              className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-custom-background-80 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none  ${
-                optionsFontsize === "sm"
-                  ? "text-xs"
-                  : optionsFontsize === "md"
-                  ? "text-base"
-                  : optionsFontsize === "lg"
-                  ? "text-lg"
-                  : optionsFontsize === "xl"
-                  ? "text-xl"
-                  : optionsFontsize === "2xl"
-                  ? "text-2xl"
-                  : ""
-              } ${optionsClassName || ""}`}
-            >
-              <Combobox.Input
-                className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
-                onChange={(event) => setQuery(event.target.value)}
-                placeholder="Search"
-                displayValue={(assigned: any) => assigned?.name}
-              />
-              <div className="py-1">
-                {filteredOptions ? (
-                  filteredOptions.length > 0 ? (
-                    filteredOptions.map((option) => (
-                      <Combobox.Option
-                        key={option.value}
-                        className={({ active }) =>
-                          `${
-                            active ? "bg-indigo-50" : ""
-                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-custom-text-100`
-                        }
-                        value={option.value}
-                      >
-                        {assignee && userAvatar(option.value)}
-                        {option.element ?? option.display}
-                      </Combobox.Option>
-                    ))
-                  ) : (
-                    <p className="text-xs text-custom-text-200 px-2">
-                      No {title.toLowerCase()} found
-                    </p>
-                  )
-                ) : (
-                  <p className="text-xs text-custom-text-200 px-2">Loading...</p>
-                )}
-              </div>
-            </Combobox.Options>
-          </Transition>
-        </>
-      )}
-    </Combobox>
-  );
-};
-
-export default SearchListbox;
diff --git a/web/components/search-listbox/types.d.ts b/web/components/search-listbox/types.d.ts
deleted file mode 100644
index c9ffa6af3..000000000
--- a/web/components/search-listbox/types.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-type Value = any;
-
-export type Props = {
-  title: string;
-  multiple?: boolean;
-  options?: Array<{ display: string; element?: JSX.Element; value: Value }>;
-  onChange: (value: Value) => void;
-  value: Value;
-  icon?: JSX.Element;
-  buttonClassName?: string;
-  optionsClassName?: string;
-  width?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-  optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
-  assignee?: boolean;
-};
diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx
index ad7f38c4e..b67ad417e 100644
--- a/web/components/states/create-state-modal.tsx
+++ b/web/components/states/create-state-modal.tsx
@@ -1,36 +1,30 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
-// react-color
 import { TwitterPicker } from "react-color";
-// headless ui
 import { Dialog, Popover, Transition } from "@headlessui/react";
 // services
-import stateService from "services/state.service";
+import { ProjectStateService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { Button, Input, TextArea } from "@plane/ui";
 // icons
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 // types
-import type { ICurrentUserResponse, IState, IStateResponse } from "types";
+import type { IUser, IState, IStateResponse } from "types";
 // fetch keys
 import { STATES_LIST } from "constants/fetch-keys";
 // constants
 import { GROUP_CHOICES } from "constants/project";
-
 // types
 type Props = {
   isOpen: boolean;
   projectId: string;
   handleClose: () => void;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
 const defaultValues: Partial<IState> = {
@@ -40,6 +34,8 @@ const defaultValues: Partial<IState> = {
   group: "backlog",
 };
 
+const projectStateService = new ProjectStateService();
+
 export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClose, user }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -47,7 +43,6 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
   const { setToastAlert } = useToast();
 
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
     watch,
@@ -69,7 +64,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
       ...formData,
     };
 
-    await stateService
+    await projectStateService
       .createState(workspaceSlug as string, projectId, payload, user)
       .then((res) => {
         mutate<IStateResponse>(
@@ -131,26 +126,35 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
               <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-custom-background-80 px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                 <form onSubmit={handleSubmit(onSubmit)}>
                   <div>
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                       Create State
                     </Dialog.Title>
                     <div className="mt-2 space-y-3">
                       <div>
-                        <Input
-                          id="name"
-                          label="Name"
+                        <Controller
+                          control={control}
                           name="name"
-                          type="name"
-                          placeholder="Enter name"
-                          autoComplete="off"
-                          error={errors.name}
-                          register={register}
-                          validations={{
+                          rules={{
                             required: "Name is required",
                           }}
+                          render={({ field: { value, onChange, ref } }) => (
+                            <>
+                              <label htmlFor="name" className="text-custom-text-200 mb-2">
+                                Name
+                              </label>
+                              <Input
+                                id="name"
+                                name="name"
+                                type="text"
+                                value={value}
+                                onChange={onChange}
+                                ref={ref}
+                                hasError={Boolean(errors.name)}
+                                placeholder="Enter name"
+                                className="w-full"
+                              />
+                            </>
+                          )}
                         />
                       </div>
                       <div>
@@ -215,10 +219,7 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                                     name="color"
                                     control={control}
                                     render={({ field: { value, onChange } }) => (
-                                      <TwitterPicker
-                                        color={value}
-                                        onChange={(value) => onChange(value.hex)}
-                                      />
+                                      <TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
                                     )}
                                   />
                                 </Popover.Panel>
@@ -228,22 +229,33 @@ export const CreateStateModal: React.FC<Props> = ({ isOpen, projectId, handleClo
                         </Popover>
                       </div>
                       <div>
-                        <TextArea
-                          id="description"
+                        <label htmlFor="description" className="mb-2 text-custom-text-200">
+                          Description
+                        </label>
+                        <Controller
                           name="description"
-                          label="Description"
-                          placeholder="Enter description"
-                          error={errors.description}
-                          register={register}
+                          control={control}
+                          render={({ field: { value, onChange } }) => (
+                            <TextArea
+                              id="description"
+                              name="description"
+                              value={value}
+                              placeholder="Enter description"
+                              onChange={onChange}
+                              hasError={Boolean(errors?.description)}
+                            />
+                          )}
                         />
                       </div>
                     </div>
                   </div>
                   <div className="mt-5 flex justify-end gap-2">
-                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
-                    <PrimaryButton type="submit" loading={isSubmitting}>
+                    <Button variant="neutral-primary" onClick={onClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="primary" type="submit" loading={isSubmitting}>
                       {isSubmitting ? "Creating State..." : "Create State"}
-                    </PrimaryButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx
index 87ad14731..d5d0d9739 100644
--- a/web/components/states/create-update-state-inline.tsx
+++ b/web/components/states/create-update-state-inline.tsx
@@ -11,13 +11,14 @@ import { TwitterPicker } from "react-color";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // services
-import stateService from "services/state.service";
+import { ProjectStateService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton, Tooltip } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { Button, Input, Tooltip } from "@plane/ui";
 // types
-import type { ICurrentUserResponse, IState, IStateResponse } from "types";
+import type { IUser, IState, IStateResponse } from "types";
 // fetch-keys
 import { STATES_LIST } from "constants/fetch-keys";
 // constants
@@ -27,7 +28,7 @@ type Props = {
   data: IState | null;
   onClose: () => void;
   selectedGroup: StateGroup | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   groupLength: number;
 };
 
@@ -39,20 +40,15 @@ const defaultValues: Partial<IState> = {
   group: "backlog",
 };
 
-export const CreateUpdateStateInline: React.FC<Props> = ({
-  data,
-  onClose,
-  selectedGroup,
-  user,
-  groupLength,
-}) => {
+const projectStateService = new ProjectStateService();
+
+export const CreateUpdateStateInline: React.FC<Props> = ({ data, onClose, selectedGroup, user, groupLength }) => {
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
   const { setToastAlert } = useToast();
 
   const {
-    register,
     handleSubmit,
     formState: { errors, isSubmitting },
     watch,
@@ -90,7 +86,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
     };
 
     if (!data) {
-      await stateService
+      await projectStateService
         .createState(workspaceSlug.toString(), projectId.toString(), { ...payload }, user)
         .then((res) => {
           mutate<IStateResponse>(
@@ -128,7 +124,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
             });
         });
     } else {
-      await stateService
+      await projectStateService
         .updateState(
           workspaceSlug.toString(),
           projectId.toString(),
@@ -153,8 +149,7 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
             setToastAlert({
               type: "error",
               title: "Error!",
-              message:
-                "Another state exists with the same name. Please try again with another name.",
+              message: "Another state exists with the same name. Please try again with another name.",
             });
           else
             setToastAlert({
@@ -213,26 +208,32 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
           )}
         </Popover>
       </div>
-      <Input
-        id="name"
+      <Controller
+        control={control}
         name="name"
-        register={register}
-        autoFocus
-        placeholder="Name"
-        validations={{
+        rules={{
           required: true,
         }}
-        error={errors.name}
-        autoComplete="off"
+        render={({ field: { value, onChange, ref } }) => (
+          <Input
+            id="name"
+            name="name"
+            type="text"
+            value={value}
+            onChange={onChange}
+            ref={ref}
+            hasError={Boolean(errors.name)}
+            placeholder="Name"
+            className="w-full"
+          />
+        )}
       />
       {data && (
         <Controller
           name="group"
           control={control}
           render={({ field: { value, onChange } }) => (
-            <Tooltip
-              tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}
-            >
+            <Tooltip tooltipContent={groupLength === 1 ? "Cannot have an empty group." : "Choose State"}>
               <div>
                 <CustomSelect
                   disabled={groupLength === 1}
@@ -256,18 +257,29 @@ export const CreateUpdateStateInline: React.FC<Props> = ({
           )}
         />
       )}
-      <Input
-        id="description"
+      <Controller
+        control={control}
         name="description"
-        register={register}
-        placeholder="Description"
-        error={errors.description}
-        autoComplete="off"
+        render={({ field: { value, onChange, ref } }) => (
+          <Input
+            id="description"
+            name="description"
+            type="text"
+            value={value}
+            onChange={onChange}
+            ref={ref}
+            hasError={Boolean(errors.description)}
+            placeholder="Description"
+            className="w-full"
+          />
+        )}
       />
-      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-      <PrimaryButton type="submit" loading={isSubmitting}>
+      <Button variant="neutral-primary" onClick={handleClose}>
+        Cancel
+      </Button>
+      <Button variant="primary" type="submit" loading={isSubmitting}>
         {isSubmitting ? (data ? "Updating..." : "Creating...") : data ? "Update" : "Create"}
-      </PrimaryButton>
+      </Button>
     </form>
   );
 };
diff --git a/web/components/states/delete-state-modal.tsx b/web/components/states/delete-state-modal.tsx
index bbc115ef6..775dd8db9 100644
--- a/web/components/states/delete-state-modal.tsx
+++ b/web/components/states/delete-state-modal.tsx
@@ -1,21 +1,17 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
 import { mutate } from "swr";
-
-// headless ui
 import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // services
-import stateServices from "services/state.service";
+import { ProjectStateService } from "services/project";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // types
-import type { ICurrentUserResponse, IState, IStateResponse } from "types";
+import type { IUser, IState, IStateResponse } from "types";
 // fetch-keys
 import { STATES_LIST } from "constants/fetch-keys";
 
@@ -23,9 +19,11 @@ type Props = {
   isOpen: boolean;
   onClose: () => void;
   data: IState | null;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+const projectStateService = new ProjectStateService();
+
 export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user }) => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
@@ -44,7 +42,7 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
 
     setIsDeleteLoading(true);
 
-    await stateServices
+    await projectStateService
       .deleteState(workspaceSlug as string, data.project, data.id, user)
       .then(() => {
         mutate<IStateResponse>(
@@ -112,34 +110,29 @@ export const DeleteStateModal: React.FC<Props> = ({ isOpen, onClose, data, user
                 <div className="bg-custom-background-80 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-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Delete State
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to delete state-{" "}
-                          <span className="font-medium text-custom-text-100">{data?.name}</span>?
-                          All of the data related to the state will be permanently removed. This
-                          action cannot be undone.
+                          <span className="font-medium text-custom-text-100">{data?.name}</span>? All of the data
+                          related to the state 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}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/states/single-state.tsx b/web/components/states/single-state.tsx
index eb2d9b610..c62c0c954 100644
--- a/web/components/states/single-state.tsx
+++ b/web/components/states/single-state.tsx
@@ -5,9 +5,9 @@ import { useRouter } from "next/router";
 import { mutate } from "swr";
 
 // services
-import stateService from "services/state.service";
+import { ProjectStateService } from "services/project";
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
 import { ArrowDownIcon, ArrowUpIcon } from "@heroicons/react/24/outline";
 import { StateGroupIcon } from "components/icons";
@@ -18,7 +18,7 @@ import { addSpaceIfCamelCase } from "helpers/string.helper";
 import { groupBy, orderArrayBy } from "helpers/array.helper";
 import { orderStateGroups } from "helpers/state.helper";
 // types
-import { ICurrentUserResponse, IState } from "types";
+import { IUser, IState } from "types";
 // fetch-keys
 import { STATES_LIST } from "constants/fetch-keys";
 
@@ -28,9 +28,12 @@ type Props = {
   statesList: IState[];
   handleEditState: () => void;
   handleDeleteState: () => void;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
+// services
+const projectStateService = new ProjectStateService();
+
 export const SingleState: React.FC<Props> = ({
   index,
   state,
@@ -58,14 +61,10 @@ export const SingleState: React.FC<Props> = ({
     }));
     newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
 
-    mutate(
-      STATES_LIST(projectId as string),
-      orderStateGroups(groupBy(newStatesList, "group")),
-      false
-    );
+    mutate(STATES_LIST(projectId as string), orderStateGroups(groupBy(newStatesList, "group")), false);
 
     if (currentDefaultState)
-      stateService
+      projectStateService
         .patchState(
           workspaceSlug as string,
           projectId as string,
@@ -76,7 +75,7 @@ export const SingleState: React.FC<Props> = ({
           user
         )
         .then(() => {
-          stateService
+          projectStateService
             .patchState(
               workspaceSlug as string,
               projectId as string,
@@ -95,7 +94,7 @@ export const SingleState: React.FC<Props> = ({
             });
         });
     else
-      stateService
+      projectStateService
         .patchState(
           workspaceSlug as string,
           projectId as string,
@@ -131,13 +130,9 @@ export const SingleState: React.FC<Props> = ({
     }));
     newStatesList = orderArrayBy(newStatesList, "sequence", "ascending");
 
-    mutate(
-      STATES_LIST(projectId as string),
-      orderStateGroups(groupBy(newStatesList, "group")),
-      false
-    );
+    mutate(STATES_LIST(projectId as string), orderStateGroups(groupBy(newStatesList, "group")), false);
 
-    stateService
+    projectStateService
       .patchState(
         workspaceSlug as string,
         projectId as string,
@@ -216,26 +211,14 @@ export const SingleState: React.FC<Props> = ({
           >
             {state.default ? (
               <Tooltip tooltipContent="Cannot delete the default state.">
-                <X
-                  className={`h-4 w-4 ${
-                    groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"
-                  }`}
-                />
+                <X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
               </Tooltip>
             ) : groupLength === 1 ? (
               <Tooltip tooltipContent="Cannot have an empty group.">
-                <X
-                  className={`h-4 w-4 ${
-                    groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"
-                  }`}
-                />
+                <X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
               </Tooltip>
             ) : (
-              <X
-                className={`h-4 w-4 ${
-                  groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"
-                }`}
-              />
+              <X className={`h-4 w-4 ${groupLength < 1 ? "text-custom-sidebar-text-400" : "text-red-500"}`} />
             )}
           </button>
         </div>
diff --git a/web/components/states/state-select.tsx b/web/components/states/state-select.tsx
index 3ae2ec101..1d5846019 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,
@@ -63,7 +66,7 @@ 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)
+      ? () => projectStateService.getStates(workspaceSlug.toString(), projectId)
       : null
   );
 
@@ -81,16 +84,12 @@ export const StateSelect: React.FC<Props> = ({
   }));
 
   const filteredOptions =
-    query === ""
-      ? options
-      : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
+    query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
 
   const label = (
     <Tooltip tooltipHeading="State" tooltipContent={value?.name ?? ""} position="top">
       <div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
-        <span className="h-3.5 w-3.5">
-          {value && <StateGroupIcon stateGroup={value.group} color={value.color} />}
-        </span>
+        <span className="h-3.5 w-3.5">{value && <StateGroupIcon stateGroup={value.group} color={value.color} />}</span>
         <span className="truncate">{value?.name ?? "State"}</span>
       </div>
     </Tooltip>
@@ -116,15 +115,11 @@ export const StateSelect: React.FC<Props> = ({
                 ref={setReferenceElement}
                 type="button"
                 className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
-                  disabled
-                    ? "cursor-not-allowed text-custom-text-200"
-                    : "cursor-pointer hover:bg-custom-background-80"
+                  disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
                 } ${buttonClassName}`}
               >
                 {label}
-                {!hideDropdownArrow && !disabled && (
-                  <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
-                )}
+                {!hideDropdownArrow && !disabled && <ChevronDownIcon className="h-3 w-3" aria-hidden="true" />}
               </button>
             </Combobox.Button>
             <Combobox.Options>
diff --git a/web/components/ui/avatar.tsx b/web/components/ui/avatar.tsx
index d60baa56e..0c12093f4 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/ui/datepicker.tsx b/web/components/ui/datepicker.tsx
index 3bb0d3a1d..2f4dd96b9 100644
--- a/web/components/ui/datepicker.tsx
+++ b/web/components/ui/datepicker.tsx
@@ -29,7 +29,6 @@ export const CustomDatePicker: React.FC<Props> = ({
   handleOnOpen,
   handleOnClose,
   placeholder = "Select date",
-  displayShortForm = false,
   error = false,
   noBorder = false,
   wrapperClassName = "",
@@ -53,13 +52,9 @@ export const CustomDatePicker: React.FC<Props> = ({
       renderAs === "input"
         ? "block px-2 py-2 text-sm focus:outline-none"
         : renderAs === "button"
-        ? `px-2 py-1 text-xs shadow-sm ${
-            disabled ? "" : "hover:bg-custom-background-80"
-          } duration-300`
+        ? `px-2 py-1 text-xs shadow-sm ${disabled ? "" : "hover:bg-custom-background-80"} duration-300`
         : ""
-    } ${error ? "border-red-500 bg-red-100" : ""} ${
-      disabled ? "cursor-not-allowed" : "cursor-pointer"
-    } ${
+    } ${error ? "border-red-500 bg-red-100" : ""} ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${
       noBorder ? "" : "border border-custom-border-200"
     } w-full rounded-md caret-transparent outline-none ${className}`}
     dateFormat="MMM dd, yyyy"
diff --git a/web/components/ui/dropdowns/custom-menu.tsx b/web/components/ui/dropdowns/custom-menu.tsx
index 3def4c677..1ae644535 100644
--- a/web/components/ui/dropdowns/custom-menu.tsx
+++ b/web/components/ui/dropdowns/custom-menu.tsx
@@ -68,15 +68,10 @@ const CustomMenu = ({
                     onClick={menuButtonOnClick}
                     disabled={disabled}
                     className={`relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none ${
-                      disabled
-                        ? "cursor-not-allowed"
-                        : "cursor-pointer hover:bg-custom-background-80"
+                      disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
                     } ${buttonClassName}`}
                   >
-                    <MoreHorizOutlined
-                      fontSize="small"
-                      className={verticalEllipsis ? "rotate-90" : ""}
-                    />
+                    <MoreHorizOutlined fontSize="small" className={verticalEllipsis ? "rotate-90" : ""} />
                   </button>
                 </Menu.Button>
               ) : (
@@ -86,9 +81,7 @@ const CustomMenu = ({
                     type="button"
                     className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap duration-300 ${
                       open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
-                    } ${
-                      noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"
-                    } ${
+                    } ${noBorder ? "" : "border border-custom-border-300 shadow-sm focus:outline-none"} ${
                       disabled
                         ? "cursor-not-allowed text-custom-text-200"
                         : "cursor-pointer hover:bg-custom-background-80"
@@ -142,13 +135,7 @@ type MenuItemProps = {
   className?: string;
 };
 
-const MenuItem: React.FC<MenuItemProps> = ({
-  children,
-  renderAs,
-  href,
-  onClick,
-  className = "",
-}) => (
+const MenuItem: React.FC<MenuItemProps> = ({ children, renderAs, href, onClick, className = "" }) => (
   <Menu.Item as="div">
     {({ active, close }) =>
       renderAs === "a" ? (
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
index 3f9815533..19b6e87cb 100644
--- a/web/components/ui/index.ts
+++ b/web/components/ui/index.ts
@@ -7,7 +7,6 @@ export * from "./avatar";
 export * from "./date";
 export * from "./datepicker";
 export * from "./empty-space";
-export * from "./empty-state";
 export * from "./icon";
 export * from "./labels-list";
 export * from "./linear-progress-indicator";
diff --git a/web/components/ui/labels-list.tsx b/web/components/ui/labels-list.tsx
index ba130acca..ba054b116 100644
--- a/web/components/ui/labels-list.tsx
+++ b/web/components/ui/labels-list.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import { FC } from "react";
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // types
 import { IIssueLabels } from "types";
 
@@ -10,25 +10,20 @@ type IssueLabelsListProps = {
   showLength?: boolean;
 };
 
-export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
-  labels,
-  length = 5,
-  showLength = true,
-}) => (
-  <>
-    {labels && (
-      <>
-        <Tooltip
-          position="top"
-          tooltipHeading="Labels"
-          tooltipContent={labels.map((l) => l?.name).join(", ")}
-        >
-          <div className="flex items-center gap-1.5 px-2 py-1 text-custom-text-200 rounded shadow-sm border border-custom-border-300">
-            <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
-            {`${labels.length} Labels`}
-          </div>
-        </Tooltip>
-      </>
-    )}
-  </>
-);
+export const IssueLabelsList: FC<IssueLabelsListProps> = (props) => {
+  const { labels } = props;
+  return (
+    <>
+      {labels && (
+        <>
+          <Tooltip position="top" tooltipHeading="Labels" tooltipContent={labels.map((l) => l?.name).join(", ")}>
+            <div className="flex items-center gap-1.5 px-2 py-1 text-custom-text-200 rounded shadow-sm border border-custom-border-300">
+              <span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
+              {`${labels.length} Labels`}
+            </div>
+          </Tooltip>
+        </>
+      )}
+    </>
+  );
+};
diff --git a/web/components/ui/linear-progress-indicator.tsx b/web/components/ui/linear-progress-indicator.tsx
index e6fe2b758..ac61f255f 100644
--- a/web/components/ui/linear-progress-indicator.tsx
+++ b/web/components/ui/linear-progress-indicator.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Tooltip } from "./tooltip";
+import { Tooltip } from "@plane/ui";
 
 type Props = {
   data: any;
@@ -8,6 +8,7 @@ type Props = {
 
 export const LinearProgressIndicator: React.FC<Props> = ({ data, noTooltip = false }) => {
   const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   let progress = 0;
 
   const bars = data.map((item: any) => {
diff --git a/web/components/ui/product-updates-modal.tsx b/web/components/ui/product-updates-modal.tsx
index 4f5bad7b3..1c27c224c 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/ui/tooltip.tsx b/web/components/ui/tooltip.tsx
index 3a4c5d71f..468f79534 100644
--- a/web/components/ui/tooltip.tsx
+++ b/web/components/ui/tooltip.tsx
@@ -1,8 +1,5 @@
 import React from "react";
-
-// next-themes
 import { useTheme } from "next-themes";
-// tooltip2
 import { Tooltip2 } from "@blueprintjs/popover2";
 
 type Props = {
@@ -51,17 +48,11 @@ export const Tooltip: React.FC<Props> = ({
       content={
         <div
           className={`relative z-50 max-w-xs gap-1 rounded-md p-2 text-xs shadow-md ${
-            theme === "custom"
-              ? "bg-custom-background-100 text-custom-text-200"
-              : "bg-black text-gray-400"
+            theme === "custom" ? "bg-custom-background-100 text-custom-text-200" : "bg-black text-gray-400"
           } break-words overflow-hidden ${className}`}
         >
           {tooltipHeading && (
-            <h5
-              className={`font-medium ${
-                theme === "custom" ? "text-custom-text-100" : "text-white"
-              }`}
-            >
+            <h5 className={`font-medium ${theme === "custom" ? "text-custom-text-100" : "text-white"}`}>
               {tooltipHeading}
             </h5>
           )}
@@ -69,7 +60,7 @@ export const Tooltip: React.FC<Props> = ({
         </div>
       }
       position={position}
-      renderTarget={({ isOpen: isTooltipOpen, ref: eleReference, ...tooltipProps }) =>
+      renderTarget={({ ref: eleReference, ...tooltipProps }) =>
         React.cloneElement(children, { ref: eleReference, ...tooltipProps, ...children.props })
       }
     />
diff --git a/web/components/user/index.ts b/web/components/user/index.ts
new file mode 100644
index 000000000..9c2663b18
--- /dev/null
+++ b/web/components/user/index.ts
@@ -0,0 +1 @@
+export * from "./user-greetings";
diff --git a/web/components/user/user-greetings.tsx b/web/components/user/user-greetings.tsx
new file mode 100644
index 000000000..f7d00a489
--- /dev/null
+++ b/web/components/user/user-greetings.tsx
@@ -0,0 +1,49 @@
+import { FC } from "react";
+import { IUser } from "types";
+
+export interface IUserGreetingsView {
+  user: IUser;
+}
+
+export const UserGreetingsView: FC<IUserGreetingsView> = (props) => {
+  const { user } = props;
+
+  const currentTime = new Date();
+
+  const hour = new Intl.DateTimeFormat("en-US", {
+    hour12: false,
+    hour: "numeric",
+  }).format(currentTime);
+
+  const date = new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+  }).format(currentTime);
+
+  const weekDay = new Intl.DateTimeFormat("en-US", {
+    weekday: "long",
+  }).format(currentTime);
+
+  const timeString = new Intl.DateTimeFormat("en-US", {
+    timeZone: user?.user_timezone,
+    hour12: false, // Use 24-hour format
+    hour: "2-digit",
+    minute: "2-digit",
+  }).format(currentTime);
+
+  const greeting = parseInt(hour, 10) < 12 ? "morning" : parseInt(hour, 10) < 18 ? "afternoon" : "evening";
+
+  return (
+    <div>
+      <h3 className="text-2xl font-semibold">
+        Good {greeting}, {user?.first_name} {user?.last_name}
+      </h3>
+      <h6 className="text-custom-text-400 font-medium flex items-center gap-2">
+        <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
+        <div>
+          {weekDay}, {date} {timeString}
+        </div>
+      </h6>
+    </div>
+  );
+};
diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx
index 61c627430..68b143616 100644
--- a/web/components/views/delete-view-modal.tsx
+++ b/web/components/views/delete-view-modal.tsx
@@ -1,13 +1,10 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
+import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
-// services
-import viewsService from "services/views.service";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
@@ -15,41 +12,39 @@ import { DangerButton, SecondaryButton } from "components/ui";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // types
-import type { ICurrentUserResponse, IView } from "types";
-// fetch-keys
-import { VIEWS_LIST } from "constants/fetch-keys";
+import { IProjectView } from "types";
 
 type Props = {
+  data: IProjectView;
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data: IView | null;
-  user: ICurrentUserResponse | undefined;
+  onClose: () => void;
 };
 
-export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user }) => {
+export const DeleteProjectViewModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, onClose } = props;
+
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { projectViews: projectViewsStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
-    setIsOpen(false);
+    onClose();
     setIsDeleteLoading(false);
   };
 
-  const handleDeletion = async () => {
+  const handleDeleteView = async () => {
+    if (!workspaceSlug || !projectId) return;
+
     setIsDeleteLoading(true);
-    if (!workspaceSlug || !data || !projectId) return;
 
-    await viewsService
-      .deleteView(workspaceSlug as string, projectId as string, data.id, user)
+    await projectViewsStore
+      .deleteView(workspaceSlug.toString(), projectId.toString(), data.id)
       .then(() => {
-        mutate<IView[]>(VIEWS_LIST(projectId as string), (views) =>
-          views?.filter((view) => view.id !== data.id)
-        );
-
         handleClose();
 
         setToastAlert({
@@ -58,13 +53,13 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
           message: "View deleted successfully.",
         });
       })
-      .catch(() => {
+      .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "View could not be deleted. Please try again.",
-        });
-      })
+        })
+      )
       .finally(() => {
         setIsDeleteLoading(false);
       });
@@ -100,26 +95,17 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
                 <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"
-                      />
+                      <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"
-                      >
+                      <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.
+                          <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>
@@ -127,7 +113,7 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
                 </div>
                 <div className="flex justify-end gap-2 p-4 sm:px-6">
                   <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                  <DangerButton onClick={handleDeletion} loading={isDeleteLoading}>
+                  <DangerButton onClick={handleDeleteView} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
                   </DangerButton>
                 </div>
@@ -138,4 +124,4 @@ export const DeleteViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen, user
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx
index 0c57a9542..9ec5b16f7 100644
--- a/web/components/views/form.tsx
+++ b/web/components/views/form.tsx
@@ -1,85 +1,48 @@
 import { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
 
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// services
-import stateService from "services/state.service";
-// hooks
-import useProjectMembers from "hooks/use-project-members";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { FiltersList } from "components/core";
-import { SelectFilters } from "components/views";
+import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues";
 // ui
 import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-// helpers
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
-import { getStatesList } from "helpers/state.helper";
 // types
-import { IQuery, IView } from "types";
-import issuesService from "services/issues.service";
-// fetch-keys
-import { PROJECT_ISSUE_LABELS, STATES_LIST } from "constants/fetch-keys";
+import { IProjectView } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
 type Props = {
-  handleFormSubmit: (values: IView) => Promise<void>;
+  data?: IProjectView | null;
   handleClose: () => void;
-  status: boolean;
-  data?: IView | null;
-  preLoadedData?: Partial<IView> | null;
+  handleFormSubmit: (values: IProjectView) => Promise<void>;
+  preLoadedData?: Partial<IProjectView> | null;
 };
 
-const defaultValues: Partial<IView> = {
+const defaultValues: Partial<IProjectView> = {
   name: "",
   description: "",
 };
 
-export const ViewForm: React.FC<Props> = ({
-  handleFormSubmit,
-  handleClose,
-  status,
-  data,
-  preLoadedData,
-}) => {
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+export const ProjectViewForm: React.FC<Props> = observer(({ handleFormSubmit, handleClose, data, preLoadedData }) => {
+  const { project: projectStore } = useMobxStore();
 
   const {
-    register,
+    control,
     formState: { errors, isSubmitting },
     handleSubmit,
+    register,
     reset,
-    watch,
     setValue,
-  } = useForm<IView>({
+    watch,
+  } = useForm<IProjectView>({
     defaultValues,
   });
-  const filters = watch("query");
 
-  const { data: stateGroups } = useSWR(
-    workspaceSlug && projectId && (filters?.state ?? []).length > 0
-      ? STATES_LIST(projectId as string)
-      : null,
-    workspaceSlug && (filters?.state ?? []).length > 0
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
-      : null
-  );
-  const states = getStatesList(stateGroups);
+  const selectedFilters = watch("query_data");
 
-  const { data: labels } = useSWR(
-    workspaceSlug && projectId && (filters?.labels ?? []).length > 0
-      ? PROJECT_ISSUE_LABELS(projectId.toString())
-      : null,
-    workspaceSlug && projectId && (filters?.labels ?? []).length > 0
-      ? () => issuesService.getIssueLabels(workspaceSlug.toString(), projectId.toString())
-      : null
-  );
-  const { members } = useProjectMembers(workspaceSlug?.toString(), projectId?.toString());
-
-  const handleCreateUpdateView = async (formData: IView) => {
+  const handleCreateUpdateView = async (formData: IProjectView) => {
     await handleFormSubmit(formData);
 
     reset({
@@ -88,16 +51,9 @@ export const ViewForm: React.FC<Props> = ({
   };
 
   const clearAllFilters = () => {
-    setValue("query", {
-      assignees: null,
-      created_by: null,
-      labels: null,
-      priority: null,
-      state: null,
-      start_date: null,
-      target_date: null,
-      type: null,
-    });
+    if (!selectedFilters) return;
+
+    setValue("query_data", {});
   };
 
   useEffect(() => {
@@ -108,18 +64,10 @@ export const ViewForm: React.FC<Props> = ({
     });
   }, [data, preLoadedData, reset]);
 
-  useEffect(() => {
-    if (status && data) {
-      setValue("query", data.query_data);
-    }
-  }, [data, status, setValue]);
-
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-          {status ? "Update" : "Create"} View
-        </h3>
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
         <div className="space-y-3">
           <div>
             <Input
@@ -151,58 +99,57 @@ export const ViewForm: React.FC<Props> = ({
             />
           </div>
           <div>
-            <SelectFilters
-              filters={filters}
-              onSelect={(option) => {
-                const key = option.key as keyof typeof filters;
+            <Controller
+              control={control}
+              name="query_data"
+              render={({ field: { onChange, value: filters } }) => (
+                <FiltersDropdown title="Filters">
+                  <FilterSelection
+                    filters={filters ?? {}}
+                    handleFiltersUpdate={(key, value) => {
+                      const newValues = filters?.[key] ?? [];
 
-                if (key === "start_date" || key === "target_date") {
-                  const valueExists = checkIfArraysHaveSameElements(
-                    filters?.[key] ?? [],
-                    option.value
-                  );
+                      if (Array.isArray(value)) {
+                        value.forEach((val) => {
+                          if (!newValues.includes(val)) newValues.push(val);
+                        });
+                      } else {
+                        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+                        else newValues.push(value);
+                      }
 
-                  setValue("query", {
-                    ...filters,
-                    [key]: valueExists ? null : option.value,
-                  } as IQuery);
-                } else {
-                  if (!filters?.[key]?.includes(option.value))
-                    setValue("query", {
-                      ...filters,
-                      [key]: [...((filters?.[key] as any[]) ?? []), option.value],
-                    });
-                  else {
-                    setValue("query", {
-                      ...filters,
-                      [key]: (filters?.[key] as any[])?.filter((item) => item !== option.value),
-                    });
-                  }
-                }
-              }}
-            />
-          </div>
-          <div>
-            <FiltersList
-              filters={filters}
-              labels={labels}
-              members={members?.map((m) => m.member)}
-              states={states}
-              clearAllFilters={clearAllFilters}
-              setFilters={(query: any) => {
-                setValue("query", {
-                  ...filters,
-                  ...query,
-                });
-              }}
+                      onChange({
+                        ...filters,
+                        [key]: newValues,
+                      });
+                    }}
+                    layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues.list}
+                    labels={projectStore.projectLabels ?? undefined}
+                    members={projectStore.projectMembers?.map((m) => m.member) ?? undefined}
+                    states={projectStore.projectStatesByGroups ?? undefined}
+                  />
+                </FiltersDropdown>
+              )}
             />
           </div>
+          {selectedFilters && Object.keys(selectedFilters).length > 0 && (
+            <div>
+              <AppliedFiltersList
+                appliedFilters={selectedFilters}
+                handleClearAllFilters={clearAllFilters}
+                handleRemoveFilter={() => {}}
+                labels={projectStore.projectLabels ?? undefined}
+                members={projectStore.projectMembers?.map((m) => m.member) ?? undefined}
+                states={projectStore.projectStatesByGroups ?? undefined}
+              />
+            </div>
+          )}
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
         <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
         <PrimaryButton type="submit" loading={isSubmitting}>
-          {status
+          {data
             ? isSubmitting
               ? "Updating View..."
               : "Update View"
@@ -213,4 +160,4 @@ export const ViewForm: React.FC<Props> = ({
       </div>
     </form>
   );
-};
+});
diff --git a/web/components/views/index.ts b/web/components/views/index.ts
index a68740368..6310e79df 100644
--- a/web/components/views/index.ts
+++ b/web/components/views/index.ts
@@ -1,6 +1,7 @@
 export * from "./delete-view-modal";
 export * from "./form";
-export * from "./gantt-chart";
 export * from "./modal";
 export * from "./select-filters";
-export * from "./single-view-item";
+export * from "./view-list-item";
+export * from "./views-list";
+export * from "./workspace-dashboard";
diff --git a/web/components/views/modal.tsx b/web/components/views/modal.tsx
index c1ff54231..cdcc37b18 100644
--- a/web/components/views/modal.tsx
+++ b/web/components/views/modal.tsx
@@ -1,110 +1,77 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
+import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
-// services
-import viewsService from "services/views.service";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { ViewForm } from "components/views";
+import { ProjectViewForm } from "components/views";
 // types
-import { ICurrentUserResponse, IView } from "types";
-// fetch-keys
-import { VIEWS_LIST } from "constants/fetch-keys";
+import { IProjectView } from "types";
 
 type Props = {
+  data?: IProjectView | null;
   isOpen: boolean;
-  handleClose: () => void;
-  data?: IView | null;
-  preLoadedData?: Partial<IView> | null;
-  user: ICurrentUserResponse | undefined;
+  onClose: () => void;
+  preLoadedData?: Partial<IProjectView> | null;
 };
 
-export const CreateUpdateViewModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  data,
-  preLoadedData,
-  user,
-}) => {
+export const CreateUpdateProjectViewModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, onClose, preLoadedData } = props;
+
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { projectViews: projectViewsStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
-  const onClose = () => {
-    handleClose();
+  const handleClose = () => {
+    onClose();
   };
 
-  const createView = async (payload: IView) => {
-    payload = {
-      ...payload,
-      query_data: payload.query,
-    };
-    await viewsService
-      .createView(workspaceSlug as string, projectId as string, payload, user)
-      .then(() => {
-        mutate(VIEWS_LIST(projectId as string));
-        handleClose();
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "View created successfully.",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "View could not be created. Please try again.",
-        });
-      });
-  };
-
-  const updateView = async (payload: IView) => {
-    const payloadData = {
-      ...payload,
-      query_data: payload.query,
-    };
-    await viewsService
-      .updateView(workspaceSlug as string, projectId as string, data?.id ?? "", payloadData, user)
-      .then((res) => {
-        mutate<IView[]>(
-          VIEWS_LIST(projectId as string),
-          (prevData) =>
-            prevData?.map((p) => {
-              if (p.id === res.id) return { ...p, ...payloadData };
-
-              return p;
-            }),
-          false
-        );
-        onClose();
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "View updated successfully.",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "View could not be updated. Please try again.",
-        });
-      });
-  };
-
-  const handleFormSubmit = async (formData: IView) => {
+  const createView = async (formData: IProjectView) => {
     if (!workspaceSlug || !projectId) return;
 
+    const payload = {
+      ...formData,
+    };
+
+    await projectViewsStore
+      .createView(workspaceSlug.toString(), projectId.toString(), payload)
+      .then(() => handleClose())
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        })
+      );
+  };
+
+  const updateView = async (formData: IProjectView) => {
+    if (!workspaceSlug || !projectId) return;
+
+    const payload = {
+      ...formData,
+    };
+
+    await projectViewsStore
+      .updateView(workspaceSlug.toString(), projectId.toString(), data?.id as string, payload)
+      .then(() => handleClose())
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Something went wrong. Please try again.",
+        })
+      );
+  };
+
+  const handleFormSubmit = async (formData: IProjectView) => {
     if (!data) await createView(formData);
     else await updateView(formData);
   };
@@ -136,11 +103,10 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 px-5 py-8 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
-                <ViewForm
-                  handleFormSubmit={handleFormSubmit}
-                  handleClose={handleClose}
-                  status={data ? true : false}
+                <ProjectViewForm
                   data={data}
+                  handleClose={handleClose}
+                  handleFormSubmit={handleFormSubmit}
                   preLoadedData={preLoadedData}
                 />
               </Dialog.Panel>
@@ -150,4 +116,4 @@ export const CreateUpdateViewModal: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/views/select-filters.tsx b/web/components/views/select-filters.tsx
index c3aadc33d..ed68981a3 100644
--- a/web/components/views/select-filters.tsx
+++ b/web/components/views/select-filters.tsx
@@ -1,13 +1,9 @@
 import { useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import stateService from "services/state.service";
-import projectService from "services/project.service";
-import issuesService from "services/issues.service";
+import { ProjectStateService, ProjectService } from "services/project";
+import { IssueLabelService } from "services/issue";
 // components
 import { DateFilterModal } from "components/core";
 // ui
@@ -32,12 +28,11 @@ type Props = {
   height?: "sm" | "md" | "rg" | "lg";
 };
 
-export const SelectFilters: React.FC<Props> = ({
-  filters,
-  onSelect,
-  direction = "right",
-  height = "md",
-}) => {
+const projectService = new ProjectService();
+const projectStateService = new ProjectStateService();
+const issueLabelService = new IssueLabelService();
+
+export const SelectFilters: React.FC<Props> = ({ filters, onSelect, direction = "right", height = "md" }) => {
   const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false);
   const [dateFilterType, setDateFilterType] = useState<{
     title: string;
@@ -53,7 +48,7 @@ export const SelectFilters: React.FC<Props> = ({
   const { data: states } = useSWR(
     workspaceSlug && projectId ? STATES_LIST(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => stateService.getStates(workspaceSlug as string, projectId as string)
+      ? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
   const statesList = getStatesList(states);
@@ -68,7 +63,7 @@ export const SelectFilters: React.FC<Props> = ({
   const { data: issueLabels } = useSWR(
     projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
     workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId.toString())
       : null
   );
 
@@ -191,7 +186,7 @@ export const SelectFilters: React.FC<Props> = ({
             key: "start_date",
             value: option.value,
           },
-          selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], option.value),
+          selected: checkIfArraysHaveSameElements(filters?.start_date ?? [], [option.value]),
         })),
         {
           id: "custom",
@@ -227,7 +222,7 @@ export const SelectFilters: React.FC<Props> = ({
             key: "target_date",
             value: option.value,
           },
-          selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], option.value),
+          selected: checkIfArraysHaveSameElements(filters?.target_date ?? [], [option.value]),
         })),
         {
           id: "custom",
@@ -253,7 +248,7 @@ export const SelectFilters: React.FC<Props> = ({
   ];
   return (
     <>
-      {isDateFilterModalOpen && (
+      {/* {isDateFilterModalOpen && (
         <DateFilterModal
           title={dateFilterType.title}
           field={dateFilterType.type}
@@ -262,7 +257,7 @@ export const SelectFilters: React.FC<Props> = ({
           isOpen={isDateFilterModalOpen}
           onSelect={onSelect}
         />
-      )}
+      )} */}
       <MultiLevelDropdown
         label="Filters"
         onSelect={onSelect}
diff --git a/web/components/views/single-view-item.tsx b/web/components/views/single-view-item.tsx
deleted file mode 100644
index 70f07a416..000000000
--- a/web/components/views/single-view-item.tsx
+++ /dev/null
@@ -1,175 +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/views.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/views/view-list-item.tsx b/web/components/views/view-list-item.tsx
new file mode 100644
index 000000000..c418d175d
--- /dev/null
+++ b/web/components/views/view-list-item.tsx
@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { DeleteProjectViewModal } from "components/views";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { PencilIcon, Sparkles, StarIcon, TrashIcon } from "lucide-react";
+// types
+import { IProjectView } from "types";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { calculateTotalFilters } from "helpers/filter.helper";
+
+type Props = {
+  view: IProjectView;
+};
+
+export const ProjectViewListItem: React.FC<Props> = observer((props) => {
+  const { view } = props;
+
+  const [deleteViewModal, setDeleteViewModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  const { projectViews: projectViewsStore } = useMobxStore();
+
+  const handleAddToFavorites = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    projectViewsStore.addViewToFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
+  };
+
+  const handleRemoveFromFavorites = () => {
+    if (!workspaceSlug || !projectId) return;
+
+    projectViewsStore.removeViewFromFavorites(workspaceSlug.toString(), projectId.toString(), view.id);
+  };
+
+  const totalFilters = calculateTotalFilters(view.query_data ?? {});
+
+  return (
+    <>
+      <DeleteProjectViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
+      <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
+        <Link href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}>
+          <a className="flex items-center justify-between relative rounded p-4 w-full">
+            <div className="flex items-center justify-between w-full">
+              <div className="flex items-center gap-4">
+                <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
+                  <Sparkles size={14} strokeWidth={2} />
+                </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 hidden group-hover:block">
+                    {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
+                  </p>
+
+                  {view.is_favorite ? (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleRemoveFromFavorites();
+                      }}
+                      className="grid place-items-center"
+                    >
+                      <StarIcon className="text-orange-400" fill="#f6ad55" size={14} strokeWidth={2} />
+                    </button>
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        handleAddToFavorites();
+                      }}
+                      className="grid place-items-center"
+                    >
+                      <StarIcon size={14} strokeWidth={2} />
+                    </button>
+                  )}
+                  <CustomMenu width="auto" ellipsis>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <PencilIcon size={14} strokeWidth={2} />
+                        <span>Edit View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setDeleteViewModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <TrashIcon size={14} strokeWidth={2} />
+                        <span>Delete View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            </div>
+          </a>
+        </Link>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/views/views-list.tsx b/web/components/views/views-list.tsx
new file mode 100644
index 000000000..ef342eb4f
--- /dev/null
+++ b/web/components/views/views-list.tsx
@@ -0,0 +1,80 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { ProjectViewListItem } from "components/views";
+import { EmptyState } from "components/common";
+// ui
+import { Input, Loader } from "components/ui";
+// assets
+import emptyView from "public/empty-state/view.svg";
+// icons
+import { Plus, Search } from "lucide-react";
+
+export const ProjectViewsList = observer(() => {
+  const [query, setQuery] = useState("");
+
+  const router = useRouter();
+  const { projectId } = router.query;
+
+  const { projectViews: projectViewsStore } = useMobxStore();
+
+  const viewsList = projectId ? projectViewsStore.viewsList[projectId.toString()] : undefined;
+
+  if (!viewsList)
+    return (
+      <Loader className="space-y-4 p-4">
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+      </Loader>
+    );
+
+  const filteredViewsList = viewsList.filter((v) => v.name.toLowerCase().includes(query.toLowerCase()));
+
+  return (
+    <>
+      {viewsList.length > 0 ? (
+        <div className="h-full w-full flex flex-col">
+          <div className="w-full flex flex-col overflow-hidden">
+            <div className="flex items-center gap-2.5 w-full px-5 py-3 border-b border-custom-border-200">
+              <Search className="text-custom-text-200" size={14} strokeWidth={2} />
+              <Input
+                className="w-full bg-transparent text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 !p-0 focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search"
+                mode="trueTransparent"
+              />
+            </div>
+          </div>
+          {filteredViewsList.length > 0 ? (
+            filteredViewsList.map((view) => <ProjectViewListItem key={view.id} view={view} />)
+          ) : (
+            <p className="text-custom-text-300 text-sm text-center mt-10">No results found</p>
+          )}
+        </div>
+      ) : (
+        <EmptyState
+          title="Get focused with views"
+          description="Views aid in saving your issues by applying various filters and grouping options."
+          image={emptyView}
+          primaryButton={{
+            icon: <Plus size={14} strokeWidth={2} />,
+            text: "New View",
+            onClick: () => {
+              const e = new KeyboardEvent("keydown", {
+                key: "v",
+              });
+              document.dispatchEvent(e);
+            },
+          }}
+        />
+      )}
+    </>
+  );
+});
diff --git a/web/components/views/workspace-dashboard.tsx b/web/components/views/workspace-dashboard.tsx
new file mode 100644
index 000000000..ac887c0fe
--- /dev/null
+++ b/web/components/views/workspace-dashboard.tsx
@@ -0,0 +1,90 @@
+import { useState } from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { TourRoot } from "components/onboarding";
+import { UserGreetingsView } from "components/user";
+import { CompletedIssuesGraph, IssuesList, IssuesPieChart, IssuesStats } from "components/workspace";
+import { PrimaryButton } from "components/ui";
+// images
+import emptyDashboard from "public/empty-state/dashboard.svg";
+
+export const WorkspaceDashboardView = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // store
+  const { user: userStore, project: projectStore } = useMobxStore();
+  const user = userStore.currentUser;
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : null;
+  const workspaceDashboardInfo = userStore.dashboardInfo;
+  // states
+  const [month, setMonth] = useState(new Date().getMonth() + 1);
+  // fetch user dashboard info
+  useSWR(
+    workspaceSlug ? `USER_WORKSPACE_DASHBOARD_${workspaceSlug}_${month}` : null,
+    workspaceSlug ? () => userStore.fetchUserDashboardInfo(workspaceSlug.toString(), month) : null
+  );
+
+  const handleTourCompleted = () => {
+    userStore.updateTourCompleted();
+  };
+
+  return (
+    <>
+      {/* {isProductUpdatesModalOpen && (
+        <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
+      )} */}
+      {user && !user.is_tour_completed && (
+        <div className="fixed top-0 left-0 h-full w-full bg-custom-backdrop bg-opacity-50 transition-opacity z-20 grid place-items-center">
+          <TourRoot onComplete={handleTourCompleted} />
+        </div>
+      )}
+      <div className="p-8 space-y-8">
+        {user && <UserGreetingsView user={user} />}
+
+        {projects ? (
+          projects.length > 0 ? (
+            <div className="flex flex-col gap-8">
+              <IssuesStats data={workspaceDashboardInfo} />
+              <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
+                <IssuesList issues={workspaceDashboardInfo?.overdue_issues} type="overdue" />
+                <IssuesList issues={workspaceDashboardInfo?.upcoming_issues} type="upcoming" />
+                <IssuesPieChart groupedIssues={workspaceDashboardInfo?.state_distribution} />
+                <CompletedIssuesGraph
+                  issues={workspaceDashboardInfo?.completed_issues}
+                  month={month}
+                  setMonth={setMonth}
+                />
+              </div>
+            </div>
+          ) : (
+            <div className="bg-custom-primary-100/5 flex justify-between gap-5 md:gap-8">
+              <div className="p-5 md:p-8 pr-0">
+                <h5 className="text-xl font-semibold">Create a project</h5>
+                <p className="mt-2 mb-5">Manage your projects by creating issues, cycles, modules, views and pages.</p>
+                <PrimaryButton
+                  onClick={() => {
+                    const e = new KeyboardEvent("keydown", {
+                      key: "p",
+                    });
+                    document.dispatchEvent(e);
+                  }}
+                >
+                  Create Project
+                </PrimaryButton>
+              </div>
+              <div className="hidden md:block self-end overflow-hidden pt-8">
+                <Image src={emptyDashboard} alt="Empty Dashboard" />
+              </div>
+            </div>
+          )
+        ) : null}
+      </div>
+    </>
+  );
+});
diff --git a/web/components/web-view/activity-message.tsx b/web/components/web-view/activity-message.tsx
index e44af301b..6ccad61d5 100644
--- a/web/components/web-view/activity-message.tsx
+++ b/web/components/web-view/activity-message.tsx
@@ -2,7 +2,8 @@ import { useRouter } from "next/router";
 
 // icons
 import { CopyPlus } from "lucide-react";
-import { Icon, Tooltip } from "components/ui";
+import { Icon } from "components/ui";
+import { Tooltip } from "@plane/ui";
 import { Squares2X2Icon } from "@heroicons/react/24/outline";
 import { BlockedIcon, BlockerIcon, RelatedIcon } from "components/icons";
 // helpers
@@ -12,11 +13,7 @@ import { capitalizeFirstLetter } from "helpers/string.helper";
 import { IIssueActivity } from "types";
 
 const IssueLink = ({ activity }: { activity: IIssueActivity }) => (
-  <Tooltip
-    tooltipContent={
-      activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"
-    }
-  >
+  <Tooltip tooltipContent={activity.issue_detail ? activity.issue_detail.name : "This issue has been deleted"}>
     <button
       type="button"
       onClick={() =>
@@ -30,9 +27,7 @@ const IssueLink = ({ activity }: { activity: IIssueActivity }) => (
       }
       className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
     >
-      {activity.issue_detail
-        ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}`
-        : "Issue"}
+      {activity.issue_detail ? `${activity.project_detail.identifier}-${activity.issue_detail.sequence_id}` : "Issue"}
       <Icon iconName="launch" className="!text-xs" />
     </button>
   </Tooltip>
@@ -50,11 +45,7 @@ const UserLink = ({ activity }: { activity: IIssueActivity }) => (
 
 const activityDetails: {
   [key: string]: {
-    message: (
-      activity: IIssueActivity,
-      showIssue: boolean,
-      workspaceSlug: string
-    ) => React.ReactNode;
+    message: (activity: IIssueActivity, showIssue: boolean, workspaceSlug: string) => React.ReactNode;
     icon: React.ReactNode;
   };
 } = {
@@ -104,9 +95,7 @@ const activityDetails: {
   blocking: {
     message: (activity) => (
       <>
-        {activity.old_value === ""
-          ? "marked this issue is blocking issue "
-          : "removed the blocking issue "}
+        {activity.old_value === "" ? "marked this issue is blocking issue " : "removed the blocking issue "}
         <button
           type="button"
           onClick={() =>
@@ -116,9 +105,7 @@ const activityDetails: {
                 project_id: activity.project,
                 issue_id: activity.new_identifier ?? activity.old_identifier,
                 issue_identifier:
-                  activity.new_value && activity.new_value !== ""
-                    ? activity.new_value
-                    : activity.old_value,
+                  activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value,
               })
             )
           }
@@ -147,9 +134,7 @@ const activityDetails: {
                 project_id: activity.project,
                 issue_id: activity.new_identifier ?? activity.old_identifier,
                 issue_identifier:
-                  activity.new_value && activity.new_value !== ""
-                    ? activity.new_value
-                    : activity.old_value,
+                  activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value,
               })
             )
           }
@@ -166,9 +151,7 @@ const activityDetails: {
   duplicate: {
     message: (activity) => (
       <>
-        {activity.old_value === ""
-          ? "marked this issue as duplicate of "
-          : "removed this issue as a duplicate of "}
+        {activity.old_value === "" ? "marked this issue as duplicate of " : "removed this issue as a duplicate of "}
         <button
           type="button"
           onClick={() =>
@@ -178,9 +161,7 @@ const activityDetails: {
                 project_id: activity.project,
                 issue_id: activity.new_identifier ?? activity.old_identifier,
                 issue_identifier:
-                  activity.new_value && activity.new_value !== ""
-                    ? activity.new_value
-                    : activity.old_value,
+                  activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value,
               })
             )
           }
@@ -197,9 +178,7 @@ const activityDetails: {
   relates_to: {
     message: (activity) => (
       <>
-        {activity.old_value === ""
-          ? "marked that this issue relates to "
-          : "removed the relation from "}
+        {activity.old_value === "" ? "marked that this issue relates to " : "removed the relation from "}
         <button
           type="button"
           onClick={() => {
@@ -209,9 +188,7 @@ const activityDetails: {
                 project_id: activity.project,
                 issue_id: activity.new_identifier ?? activity.old_identifier,
                 issue_identifier:
-                  activity.new_value && activity.new_value !== ""
-                    ? activity.new_value
-                    : activity.old_value,
+                  activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value,
               })
             );
           }}
@@ -245,9 +222,7 @@ const activityDetails: {
           }
           className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
         >
-          {activity.verb === "created" || activity.verb === "updated"
-            ? activity.new_value
-            : activity.old_value}
+          {activity.verb === "created" || activity.verb === "updated" ? activity.new_value : activity.old_value}
           <Icon iconName="launch" className="!text-xs" />
         </button>
       </>
@@ -275,9 +250,7 @@ const activityDetails: {
     message: (activity, showIssue) => (
       <>
         {activity.new_value ? "set the estimate point to " : "removed the estimate point "}
-        {activity.new_value && (
-          <span className="font-medium text-custom-text-100">{activity.new_value}</span>
-        )}
+        {activity.new_value && <span className="font-medium text-custom-text-100">{activity.new_value}</span>}
         {showIssue && (
           <>
             {" "}
@@ -331,12 +304,7 @@ const activityDetails: {
         {activity.verb === "updated" && "updated this "}
         {activity.verb === "deleted" && "removed this "}
         <button
-          onClick={() =>
-            console.log(
-              "link",
-              activity.verb === "created" ? activity.new_value : activity.old_value
-            )
-          }
+          onClick={() => console.log("link", activity.verb === "created" ? activity.new_value : activity.old_value)}
           className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
         >
           link
@@ -374,9 +342,7 @@ const activityDetails: {
           }
           className="font-medium text-custom-text-100 inline-flex items-center gap-1 hover:underline"
         >
-          {activity.verb === "created" || activity.verb === "updated"
-            ? activity.new_value
-            : activity.old_value}
+          {activity.verb === "created" || activity.verb === "updated" ? activity.new_value : activity.old_value}
           <Icon iconName="launch" className="!text-xs" />
         </button>
         .
@@ -414,9 +380,7 @@ const activityDetails: {
                 project_id: activity.project,
                 issue_id: activity.new_identifier ?? activity.old_identifier,
                 issue_identifier:
-                  activity.new_value && activity.new_value !== ""
-                    ? activity.new_value
-                    : activity.old_value,
+                  activity.new_value && activity.new_value !== "" ? activity.new_value : activity.old_value,
               })
             );
           }}
@@ -476,8 +440,7 @@ const activityDetails: {
   state: {
     message: (activity, showIssue) => (
       <>
-        set the state to{" "}
-        <span className="font-medium text-custom-text-100">{activity.new_value}</span>
+        set the state to <span className="font-medium text-custom-text-100">{activity.new_value}</span>
         {showIssue && (
           <>
             {" "}
@@ -495,9 +458,7 @@ const activityDetails: {
       <>
         {activity.new_value ? "set the target date to " : "removed the target date "}
         {activity.new_value && (
-          <span className="font-medium text-custom-text-100">
-            {renderShortDateWithYearFormat(activity.new_value)}
-          </span>
+          <span className="font-medium text-custom-text-100">{renderShortDateWithYearFormat(activity.new_value)}</span>
         )}
 
         {showIssue && (
@@ -516,13 +477,7 @@ export const ActivityIcon = ({ activity }: { activity: IIssueActivity }) => (
   <>{activityDetails[activity.field as keyof typeof activityDetails]?.icon}</>
 );
 
-export const ActivityMessage = ({
-  activity,
-  showIssue = false,
-}: {
-  activity: IIssueActivity;
-  showIssue?: boolean;
-}) => {
+export const ActivityMessage = ({ activity, showIssue = false }: { activity: IIssueActivity; showIssue?: boolean }) => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
diff --git a/web/components/web-view/add-comment.tsx b/web/components/web-view/add-comment.tsx
index fe7e3eb04..4c56dbb43 100644
--- a/web/components/web-view/add-comment.tsx
+++ b/web/components/web-view/add-comment.tsx
@@ -1,25 +1,17 @@
 import React from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// react-hook-form
 import { useForm, Controller } from "react-hook-form";
-
 // hooks
 import useProjectDetails from "hooks/use-project-details";
-
 // components
 import { LiteTextEditorWithRef } from "@plane/lite-text-editor";
+import { Button } from "@plane/ui";
 // icons
 import { Send } from "lucide-react";
-
-// ui
-import { PrimaryButton } from "components/ui";
-
 // types
 import type { IIssueComment } from "types";
-import fileService from "services/file.service";
+// services
+import { FileService } from "services/file.service";
 
 const defaultValues: Partial<IIssueComment> = {
   access: "INTERNAL",
@@ -35,7 +27,7 @@ type commentAccessType = {
   icon: string;
   key: string;
   label: "Private" | "Public";
-}
+};
 
 const commentAccess: commentAccessType[] = [
   {
@@ -50,6 +42,8 @@ const commentAccess: commentAccessType[] = [
   },
 ];
 
+const fileService = new FileService();
+
 export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
   const editorRef = React.useRef<any>(null);
 
@@ -104,13 +98,9 @@ export const AddComment: React.FC<Props> = ({ disabled = false, onSubmit }) => {
       </div>
 
       <div className="inline">
-        <PrimaryButton
-          type="submit"
-          disabled={isSubmitting || disabled}
-          className="mt-2 w-10 h-10 flex items-center justify-center"
-        >
+        <Button variant="primary" type="submit" disabled={isSubmitting || disabled}>
           <Send className="w-4 h-4" />
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/web-view/comment-card.tsx b/web/components/web-view/comment-card.tsx
index 9f0d40a6b..54ee30ad8 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 fa1a33939..85e16d34a 100644
--- a/web/components/web-view/create-update-link-form.tsx
+++ b/web/components/web-view/create-update-link-form.tsx
@@ -1,27 +1,15 @@
-// react
 import React, { useEffect } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import { mutate } from "swr";
-
-// react hooks form
-import { useForm } from "react-hook-form";
-
+import { Controller, useForm } from "react-hook-form";
 // services
-import issuesService from "services/issues.service";
-
+import { IssueService } from "services/issue";
 // fetch keys
 import { ISSUE_DETAILS } from "constants/fetch-keys";
-
 // hooks
 import useToast from "hooks/use-toast";
-
 // ui
-import { PrimaryButton, Input } from "components/ui";
-
+import { Button, Input } from "@plane/ui";
 // types
 import type { linkDetails, IIssueLink } from "types";
 
@@ -32,6 +20,8 @@ type Props = {
   onSuccess: () => void;
 };
 
+const issueService = new IssueService();
+
 export const CreateUpdateLinkForm: React.FC<Props> = (props) => {
   const { isOpen, data, links, onSuccess } = props;
 
@@ -41,8 +31,8 @@ export const CreateUpdateLinkForm: React.FC<Props> = (props) => {
   const { setToastAlert } = useToast();
 
   const {
-    register,
     handleSubmit,
+    control,
     reset,
     formState: { errors, isSubmitting },
   } = useForm({
@@ -74,13 +64,8 @@ export const CreateUpdateLinkForm: React.FC<Props> = (props) => {
     const payload = { metadata: {}, ...formData };
 
     if (!data)
-      await issuesService
-        .createIssueLink(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          issueId.toString(),
-          payload
-        )
+      await issueService
+        .createIssueLink(workspaceSlug.toString(), projectId.toString(), issueId.toString(), payload)
         .then(() => {
           onSuccess();
           mutate(ISSUE_DETAILS(issueId.toString()));
@@ -110,20 +95,10 @@ export const CreateUpdateLinkForm: React.FC<Props> = (props) => {
           : l
       );
 
-      mutate(
-        ISSUE_DETAILS(issueId.toString()),
-        (prevData) => ({ ...prevData, issue_link: updatedLinks }),
-        false
-      );
+      mutate(ISSUE_DETAILS(issueId.toString()), (prevData: any) => ({ ...prevData, issue_link: updatedLinks }), false);
 
-      await issuesService
-        .updateIssueLink(
-          workspaceSlug.toString(),
-          projectId.toString(),
-          issueId.toString(),
-          data!.id,
-          payload
-        )
+      await issueService
+        .updateIssueLink(workspaceSlug.toString(), projectId.toString(), issueId.toString(), data!.id, payload)
         .then(() => {
           onSuccess();
           mutate(ISSUE_DETAILS(issueId.toString()));
@@ -137,49 +112,63 @@ export const CreateUpdateLinkForm: React.FC<Props> = (props) => {
         <div className="space-y-5">
           <div className="mt-2 space-y-3">
             <div>
-              <Input
-                id="url"
-                label="URL"
+              <Controller
+                control={control}
                 name="url"
-                type="url"
-                placeholder="https://..."
-                autoComplete="off"
-                error={errors.url}
-                register={register}
-                validations={{
+                rules={{
                   required: "URL is required",
                 }}
+                render={({ field: { value, onChange, ref } }) => (
+                  <>
+                    <label htmlFor="url" className="text-custom-text-200 mb-2">
+                      URL
+                    </label>
+                    <Input
+                      id="url"
+                      name="url"
+                      type="url"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors.url)}
+                      placeholder="https://..."
+                      className="w-full"
+                    />
+                  </>
+                )}
               />
             </div>
             <div>
-              <Input
-                id="title"
-                label="Title (optional)"
+              <Controller
+                control={control}
                 name="title"
-                type="text"
-                placeholder="Enter title"
-                autoComplete="off"
-                error={errors.title}
-                register={register}
+                render={({ field: { value, onChange, ref } }) => (
+                  <>
+                    <label htmlFor="title" className="text-custom-text-200 mb-2">
+                      {`Title (optional)`}
+                    </label>
+                    <Input
+                      id="title"
+                      name="title"
+                      type="text"
+                      value={value}
+                      onChange={onChange}
+                      ref={ref}
+                      hasError={Boolean(errors.title)}
+                      placeholder="Enter title"
+                      className="w-full"
+                    />
+                  </>
+                )}
               />
             </div>
           </div>
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <PrimaryButton
-          type="submit"
-          loading={isSubmitting}
-          className="w-full !py-2 text-custom-text-300 !text-base flex items-center justify-center"
-        >
-          {data
-            ? isSubmitting
-              ? "Updating Link..."
-              : "Update Link"
-            : isSubmitting
-            ? "Adding Link..."
-            : "Add Link"}
-        </PrimaryButton>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
+          {data ? (isSubmitting ? "Updating Link..." : "Update Link") : isSubmitting ? "Adding Link..." : "Add Link"}
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/web-view/issue-activity.tsx b/web/components/web-view/issue-activity.tsx
index 4b24eaa62..34bb0e907 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/issues.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,27 +38,15 @@ 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
-      .patchIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        comment,
-        formData,
-        user
-      )
+    await issueCommentService
+      .patchIssueComment(workspaceSlug as string, projectId as string, issueId as string, comment, formData, user)
       .then(() => mutateIssueActivity())
       .catch(() =>
         console.log(
@@ -82,14 +64,8 @@ export const IssueActivity: React.FC<Props> = (props) => {
 
     mutateIssueActivity((prevData: any) => prevData?.filter((p: any) => p.id !== commentId), false);
 
-    await issuesService
-      .deleteIssueComment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        commentId,
-        user
-      )
+    await issueCommentService
+      .deleteIssueComment(workspaceSlug as string, projectId as string, issueId as string, commentId, user)
       .then(() => mutateIssueActivity())
       .catch(() =>
         console.log(
@@ -105,14 +81,8 @@ export const IssueActivity: React.FC<Props> = (props) => {
   const handleAddComment = async (formData: IIssueComment) => {
     if (!workspaceSlug || !issueDetails || !allowed) return;
 
-    await issuesService
-      .createIssueComment(
-        workspaceSlug.toString(),
-        issueDetails.project,
-        issueDetails.id,
-        formData,
-        user
-      )
+    await issueCommentService
+      .createIssueComment(workspaceSlug.toString(), issueDetails.project, issueDetails.id, formData, user)
       .then(() => {
         mutate(PROJECT_ISSUES_ACTIVITY(issueDetails.id));
       })
@@ -134,11 +104,7 @@ export const IssueActivity: React.FC<Props> = (props) => {
         <ul role="list" className="-mb-4">
           {issueActivities?.map((activityItem, index) => {
             // determines what type of action is performed
-            const message = activityItem.field ? (
-              <ActivityMessage activity={activityItem} />
-            ) : (
-              "created the issue."
-            );
+            const message = activityItem.field ? <ActivityMessage activity={activityItem} /> : "created the issue.";
 
             if ("field" in activityItem && activityItem.field !== "updated_by") {
               return (
@@ -157,15 +123,11 @@ export const IssueActivity: React.FC<Props> = (props) => {
                             <div className="ring-6 flex h-7 w-7 items-center justify-center rounded-full bg-custom-background-80 text-custom-text-200 ring-white">
                               {activityItem.field ? (
                                 activityItem.new_value === "restore" ? (
-                                  <Icon
-                                    iconName="history"
-                                    className="text-sm text-custom-text-200"
-                                  />
+                                  <Icon iconName="history" className="text-sm text-custom-text-200" />
                                 ) : (
                                   <ActivityIcon activity={activityItem} />
                                 )
-                              ) : activityItem.actor_detail.avatar &&
-                                activityItem.actor_detail.avatar !== "" ? (
+                              ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
                                 <img
                                   src={activityItem.actor_detail.avatar}
                                   alt={activityItem.actor_detail.display_name}
@@ -188,13 +150,10 @@ export const IssueActivity: React.FC<Props> = (props) => {
                       </div>
                       <div className="min-w-0 flex-1 py-3">
                         <div className="text-xs text-custom-text-200 break-words">
-                          {activityItem.field === "archived_at" &&
-                          activityItem.new_value !== "restore" ? (
+                          {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                             <span className="text-gray font-medium">Plane</span>
                           ) : activityItem.actor_detail.is_bot ? (
-                            <span className="text-gray font-medium">
-                              {activityItem.actor_detail.first_name} Bot
-                            </span>
+                            <span className="text-gray font-medium">{activityItem.actor_detail.first_name} Bot</span>
                           ) : (
                             <button
                               type="button"
@@ -206,10 +165,7 @@ export const IssueActivity: React.FC<Props> = (props) => {
                                 : activityItem.actor_detail.display_name}
                             </button>
                           )}{" "}
-                          {message}{" "}
-                          <span className="whitespace-nowrap">
-                            {timeAgo(activityItem.created_at)}
-                          </span>
+                          {message} <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
                         </div>
                       </div>
                     </div>
@@ -225,10 +181,7 @@ export const IssueActivity: React.FC<Props> = (props) => {
                     onSubmit={handleCommentUpdate}
                     handleCommentDeletion={handleCommentDelete}
                     disabled={
-                      !allowed ||
-                      !issueDetails ||
-                      issueDetails.state === "closed" ||
-                      issueDetails.state === "archived"
+                      !allowed || !issueDetails || issueDetails.state === "closed" || issueDetails.state === "archived"
                     }
                   />
                 </div>
@@ -240,10 +193,7 @@ export const IssueActivity: React.FC<Props> = (props) => {
                 <AddComment
                   onSubmit={handleAddComment}
                   disabled={
-                    !allowed ||
-                    !issueDetails ||
-                    issueDetails.state === "closed" ||
-                    issueDetails.state === "archived"
+                    !allowed || !issueDetails || issueDetails.state === "closed" || issueDetails.state === "archived"
                   }
                 />
               </div>
diff --git a/web/components/web-view/issue-attachments.tsx b/web/components/web-view/issue-attachments.tsx
index 596d791b7..d04f59fcd 100644
--- a/web/components/web-view/issue-attachments.tsx
+++ b/web/components/web-view/issue-attachments.tsx
@@ -1,31 +1,18 @@
-// react
 import React, { useState, useCallback } from "react";
-
-// next
 import Link from "next/link";
 import { useRouter } from "next/router";
-
-// swr
 import useSWR, { mutate } from "swr";
-
-// services
-import issuesService from "services/issues.service";
-
-// react dropzone
 import { useDropzone } from "react-dropzone";
-
+// services
+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";
 
@@ -35,6 +22,8 @@ type Props = {
 
 const isImage = (fileName: string) => /\.(gif|jpe?g|tiff?|png|webp|bmp)$/i.test(fileName);
 
+const issueAttachmentService = new IssueAttachmentService();
+
 export const IssueAttachments: React.FC<Props> = (props) => {
   const { allowed } = props;
 
@@ -62,13 +51,8 @@ export const IssueAttachments: React.FC<Props> = (props) => {
       );
       setIsLoading(true);
 
-      issuesService
-        .uploadIssueAttachment(
-          workspaceSlug as string,
-          projectId as string,
-          issueId as string,
-          formData
-        )
+      issueAttachmentService
+        .uploadIssueAttachment(workspaceSlug as string, projectId as string, issueId as string, formData)
         .then((res) => {
           mutate<IIssueAttachment[]>(
             ISSUE_ATTACHMENTS(issueId as string),
@@ -87,7 +71,7 @@ export const IssueAttachments: React.FC<Props> = (props) => {
           setIsOpen(false);
           setIsLoading(false);
         })
-        .catch((err) => {
+        .catch(() => {
           setIsLoading(false);
           console.log(
             "toast",
@@ -111,13 +95,8 @@ export const IssueAttachments: React.FC<Props> = (props) => {
       false
     );
 
-    await issuesService
-      .deleteIssueAttachment(
-        workspaceSlug as string,
-        projectId as string,
-        issueId as string,
-        assetId as string
-      )
+    await issueAttachmentService
+      .deleteIssueAttachment(workspaceSlug as string, projectId as string, issueId as string, assetId as string)
       .then(() => mutate(PROJECT_ISSUES_ACTIVITY(issueId as string)))
       .catch(() => {
         console.log(
@@ -140,11 +119,7 @@ export const IssueAttachments: React.FC<Props> = (props) => {
     workspaceSlug && projectId && issueId ? ISSUE_ATTACHMENTS(issueId as string) : null,
     workspaceSlug && projectId && issueId
       ? () =>
-          issuesService.getIssueAttachment(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            issueId.toString()
-          )
+          issueAttachmentService.getIssueAttachment(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
 
@@ -155,10 +130,8 @@ export const IssueAttachments: React.FC<Props> = (props) => {
         content={
           <p className="text-sm text-custom-text-200">
             Are you sure you want to delete attachment-{" "}
-            <span className="font-bold">
-              {getFileName(deleteAttachment?.attributes?.name ?? "")}
-            </span>
-            ? This attachment will be permanently removed. This action cannot be undone.
+            <span className="font-bold">{getFileName(deleteAttachment?.attributes?.name ?? "")}</span>? This attachment
+            will be permanently removed. This action cannot be undone.
           </p>
         }
         isOpen={allowed && attachmentDeleteModal}
diff --git a/web/components/web-view/issue-link-list.tsx b/web/components/web-view/issue-link-list.tsx
index bf7871a09..fe90bda3b 100644
--- a/web/components/web-view/issue-link-list.tsx
+++ b/web/components/web-view/issue-link-list.tsx
@@ -1,29 +1,16 @@
-// react
 import React, { useState } from "react";
-
-// next
-import Link from "next/link";
 import { useRouter } from "next/router";
-
-// swr
 import { mutate } from "swr";
-
 // services
-import issuesService from "services/issues.service";
-
+import { IssueService } from "services/issue";
 // icons
-// import { LinkIcon, PlusIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { Link as LinkIcon, Plus, Pencil, X } from "lucide-react";
-
 // components
 import { Label, WebViewModal, CreateUpdateLinkForm, DeleteConfirmation } from "components/web-view";
-
 // ui
-import { SecondaryButton } from "components/ui";
-
+import { Button } from "@plane/ui";
 // fetch keys
 import { ISSUE_DETAILS } from "constants/fetch-keys";
-
 // types
 import type { IIssue } from "types";
 
@@ -32,6 +19,8 @@ type Props = {
   issueDetails: IIssue;
 };
 
+const issueService = new IssueService();
+
 export const IssueLinks: React.FC<Props> = (props) => {
   const { issueDetails, allowed } = props;
 
@@ -55,7 +44,7 @@ export const IssueLinks: React.FC<Props> = (props) => {
       false
     );
 
-    await issuesService
+    await issueService
       .deleteIssueLink(workspaceSlug as string, projectId as string, issueDetails.id, linkId)
       .then(() => {
         mutate(ISSUE_DETAILS(issueDetails.id));
@@ -140,15 +129,9 @@ export const IssueLinks: React.FC<Props> = (props) => {
             )}
           </div>
         ))}
-        <SecondaryButton
-          type="button"
-          disabled={!allowed}
-          onClick={() => setIsOpen(true)}
-          className="w-full !py-2 text-custom-text-300 !text-base flex items-center justify-center"
-        >
-          <Plus className="w-[18px] h-[18px] inline-block mr-1" />
-          <span>Add</span>
-        </SecondaryButton>
+        <Button variant="neutral-primary" prependIcon={<Plus />} disabled={!allowed} onClick={() => setIsOpen(true)}>
+          Add
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/web-view/issue-properties-detail.tsx b/web/components/web-view/issue-properties-detail.tsx
index 72e6d3600..92fdb5ecd 100644
--- a/web/components/web-view/issue-properties-detail.tsx
+++ b/web/components/web-view/issue-properties-detail.tsx
@@ -1,44 +1,21 @@
-// react
 import React, { useState } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import { mutate } from "swr";
-
-// react hook forms
 import { Controller, useFormContext } from "react-hook-form";
-
-// services
-import issuesService from "services/issues.service";
-
 // hooks
 import useUser from "hooks/use-user";
 import { useProjectMyMembership } from "contexts/project-member.context";
 import useEstimateOption from "hooks/use-estimate-option";
-
 // fetch keys
 import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
-
 // icons
-import {
-  ChevronDown,
-  PlayIcon,
-  User,
-  X,
-  CalendarDays,
-  LayoutGrid,
-  Users,
-  CopyPlus,
-} from "lucide-react";
+import { PlayIcon, User, X, CalendarDays, LayoutGrid, Users, CopyPlus } from "lucide-react";
 import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 import { BlockedIcon, BlockerIcon, RelatedIcon, ContrastIcon } from "components/icons";
-
-// ui
-import { SecondaryButton } from "components/ui";
-
+//services
+import { IssueService } from "services/issue";
 // components
+import { Button } from "@plane/ui";
 import {
   Label,
   StateSelect,
@@ -54,7 +31,6 @@ import {
   CycleSelect,
   DateSelector,
 } from "components/web-view";
-
 // types
 import type { IIssue } from "types";
 
@@ -62,13 +38,14 @@ type Props = {
   submitChanges: (data: Partial<IIssue>) => Promise<void>;
 };
 
+const issueService = new IssueService();
+
 export const IssuePropertiesDetail: React.FC<Props> = (props) => {
   const { submitChanges } = props;
 
   const { watch, control } = useFormContext<IIssue>();
 
-  const blockerIssues =
-    watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || [];
+  const blockerIssues = watch("issue_relations")?.filter((i) => i.relation_type === "blocked_by") || [];
 
   const blockedByIssues = watch("related_issues")?.filter((i) => i.relation_type === "blocked_by");
 
@@ -136,13 +113,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
       <div>
         <div className="border border-custom-border-200 rounded-[4px] p-2 flex justify-between items-center">
           <div className="flex items-center gap-1 text-custom-text-400">
-            <svg
-              width="18"
-              height="18"
-              viewBox="0 0 18 18"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
+            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M13.5862 14.5239C13.3459 14.5239 13.1416 14.4398 12.9733 14.2715C12.805 14.1032 12.7209 13.8989 12.7209 13.6585V3.76429C12.7209 3.52391 12.805 3.31958 12.9733 3.15132C13.1416 2.98306 13.3459 2.89893 13.5862 2.89893C13.8266 2.89893 14.031 2.98306 14.1992 3.15132C14.3675 3.31958 14.4516 3.52391 14.4516 3.76429V13.6585C14.4516 13.8989 14.3675 14.1032 14.1992 14.2715C14.031 14.4398 13.8266 14.5239 13.5862 14.5239ZM5.1629 14.5239C5.04676 14.5239 4.93557 14.5018 4.82932 14.4576C4.72308 14.4133 4.63006 14.3513 4.55025 14.2715C4.47045 14.1917 4.40843 14.0986 4.36419 13.9922C4.31996 13.8858 4.29785 13.7746 4.29785 13.6585V11.2643C4.29785 11.0239 4.38198 10.8196 4.55025 10.6513C4.71851 10.4831 4.92283 10.3989 5.16322 10.3989C5.40359 10.3989 5.60791 10.4831 5.77618 10.6513C5.94445 10.8196 6.02859 11.0239 6.02859 11.2643V13.6585C6.02859 13.7746 6.00647 13.8858 5.96223 13.9922C5.91801 14.0986 5.85599 14.1917 5.77618 14.2715C5.69638 14.3513 5.60325 14.4133 5.49678 14.4576C5.39033 14.5018 5.27904 14.5239 5.1629 14.5239ZM9.37473 14.5239C9.13436 14.5239 8.93003 14.4398 8.76176 14.2715C8.59349 14.1032 8.50936 13.8989 8.50936 13.6585V7.5143C8.50936 7.27391 8.59349 7.06958 8.76176 6.90132C8.93003 6.73306 9.13436 6.64893 9.37473 6.64893C9.61511 6.64893 9.81943 6.73306 9.98771 6.90132C10.156 7.06958 10.2401 7.27391 10.2401 7.5143V13.6585C10.2401 13.8989 10.156 14.1032 9.98771 14.2715C9.81943 14.4398 9.61511 14.5239 9.37473 14.5239Z"
                 fill="currentColor"
@@ -181,9 +152,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
                   value={value}
                   disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
                   onChange={(val: string) => {
-                    const assignees = value?.includes(val)
-                      ? value?.filter((i) => i !== val)
-                      : [...(value ?? []), val];
+                    const assignees = value?.includes(val) ? value?.filter((i) => i !== val) : [...(value ?? []), val];
 
                     submitChanges({ assignees_list: assignees });
                   }}
@@ -249,9 +218,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
                   <span className="text-sm text-custom-text-400">Blocking</span>
                 </div>
                 <div>
-                  <BlockerSelect
-                    disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
-                  />
+                  <BlockerSelect disabled={isArchive || memberRole.isGuest || memberRole.isViewer} />
                 </div>
               </div>
               {blockerIssues &&
@@ -282,7 +249,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
                         onClick={() => {
                           if (memberRole.isGuest || memberRole.isViewer || !user) return;
 
-                          issuesService
+                          issueService
                             .deleteIssueRelation(
                               workspaceSlug as string,
                               projectId as string,
@@ -313,9 +280,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
                   <span className="text-sm text-custom-text-400">Blocked by</span>
                 </div>
                 <div>
-                  <BlockedBySelect
-                    disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
-                  />
+                  <BlockedBySelect disabled={isArchive || memberRole.isGuest || memberRole.isViewer} />
                 </div>
               </div>
               {blockedByIssues &&
@@ -346,7 +311,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
                         onClick={() => {
                           if (memberRole.isGuest || memberRole.isViewer || !user) return;
 
-                          issuesService
+                          issueService
                             .deleteIssueRelation(
                               workspaceSlug as string,
                               projectId as string,
@@ -377,9 +342,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
                   <span className="text-sm text-custom-text-400">Duplicate</span>
                 </div>
                 <div>
-                  <DuplicateSelect
-                    disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
-                  />
+                  <DuplicateSelect disabled={isArchive || memberRole.isGuest || memberRole.isViewer} />
                 </div>
               </div>
               {duplicateIssuesRelation &&
@@ -410,7 +373,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
                         onClick={() => {
                           if (memberRole.isGuest || memberRole.isViewer || !user) return;
 
-                          issuesService
+                          issueService
                             .deleteIssueRelation(
                               workspaceSlug as string,
                               projectId as string,
@@ -441,9 +404,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
                   <span className="text-sm text-custom-text-400">Relates To</span>
                 </div>
                 <div>
-                  <RelatesSelect
-                    disabled={isArchive || memberRole.isGuest || memberRole.isViewer}
-                  />
+                  <RelatesSelect disabled={isArchive || memberRole.isGuest || memberRole.isViewer} />
                 </div>
               </div>
               {relatedToIssueRelation &&
@@ -474,7 +435,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
                         onClick={() => {
                           if (memberRole.isGuest || memberRole.isViewer || !user) return;
 
-                          issuesService
+                          issueService
                             .deleteIssueRelation(
                               workspaceSlug as string,
                               projectId as string,
@@ -549,10 +510,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
             <div className="border border-custom-border-200 rounded-[4px] p-2">
               <div className="flex justify-between items-center">
                 <div className="flex items-center gap-1">
-                  <ContrastIcon
-                    color="rgba(var(--color-text-400))"
-                    className="h-4 w-4 flex-shrink-0"
-                  />
+                  <ContrastIcon color="rgba(var(--color-text-400))" className="h-4 w-4 flex-shrink-0" />
                   <span className="text-sm text-custom-text-400">Cycle</span>
                 </div>
                 <div>
@@ -567,19 +525,9 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
         </>
       )}
       <div>
-        <SecondaryButton
-          type="button"
-          onClick={() => setIsViewAllOpen((prev) => !prev)}
-          className="w-full flex justify-center items-center gap-1 !py-2"
-        >
-          <span className="text-base text-custom-primary-100">
-            {isViewAllOpen ? "View less" : "View all"}
-          </span>
-          <ChevronDown
-            size={16}
-            className={`ml-1 text-custom-primary-100 ${isViewAllOpen ? "-rotate-180" : ""}`}
-          />
-        </SecondaryButton>
+        <Button type="button" onClick={() => setIsViewAllOpen((prev) => !prev)}>
+          {isViewAllOpen ? "View less" : "View all"}
+        </Button>
       </div>
     </div>
   );
diff --git a/web/components/web-view/issue-web-view-form.tsx b/web/components/web-view/issue-web-view-form.tsx
index dd346b909..56e5f7ecc 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 "components/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,8 +25,11 @@ type Props = {
   handleSubmit: any;
 };
 
+// services
+const fileService = new FileService();
+
 export const IssueWebViewForm: React.FC<Props> = (props) => {
-  const { isAllowed, issueDetails, submitChanges, register, control, watch, handleSubmit } = props;
+  const { isAllowed, issueDetails, submitChanges, control, watch, handleSubmit } = props;
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -80,32 +74,34 @@ export const IssueWebViewForm: React.FC<Props> = (props) => {
         <Label>Title</Label>
         <div className="relative">
           {isAllowed ? (
-            <TextArea
-              id="name"
+            <Controller
               name="name"
-              placeholder="Enter issue name"
-              register={register}
-              onFocus={() => setCharacterLimit(true)}
-              onChange={(e) => {
-                setCharacterLimit(false);
-                setIsSubmitting("submitting");
-                debouncedTitleSave();
-              }}
-              required={true}
-              className="min-h-10 block w-full resize-none overflow-hidden rounded border bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
-              role="textbox"
-              disabled={!isAllowed}
+              control={control}
+              render={({ field: { value } }) => (
+                <TextArea
+                  id="name"
+                  name="name"
+                  value={value}
+                  placeholder="Enter issue name"
+                  onFocus={() => setCharacterLimit(true)}
+                  onChange={() => {
+                    setCharacterLimit(false);
+                    setIsSubmitting("submitting");
+                    debouncedTitleSave();
+                  }}
+                  required={true}
+                  className="min-h-10 block w-full resize-none overflow-hidden rounded border bg-transparent px-3 py-2 text-xl outline-none ring-0 focus:ring-1 focus:ring-custom-primary"
+                  role="textbox"
+                  disabled={!isAllowed}
+                />
+              )}
             />
           ) : (
             <h4 className="break-words text-2xl font-semibold">{issueDetails?.name}</h4>
           )}
           {characterLimit && isAllowed && (
             <div className="pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 text-custom-text-200 p-0.5 text-xs">
-              <span
-                className={`${
-                  watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""
-                }`}
-              >
+              <span className={`${watch("name").length === 0 || watch("name").length > 255 ? "text-red-500" : ""}`}>
                 {watch("name").length}
               </span>
               /255
@@ -124,26 +120,20 @@ export const IssueWebViewForm: React.FC<Props> = (props) => {
                 uploadFile={fileService.getUploadFileFunction(workspaceSlug as string)}
                 deleteFile={fileService.deleteImage}
                 value={
-                  !value ||
-                  value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
+                  !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
                     ? "<p></p>"
                     : value
                 }
                 debouncedUpdatesEnabled={true}
                 setShouldShowAlert={setShowAlert}
                 setIsSubmitting={setIsSubmitting}
-                customClassName={
-                  isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"
-                }
+                customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
                 noBorder={!isAllowed}
                 onChange={(description: Object, description_html: string) => {
                   setShowAlert(true);
                   setIsSubmitting("submitting");
                   onChange(description_html);
-                  handleSubmit(handleDescriptionFormSubmit)().finally(() =>
-                    setIsSubmitting("submitted")
-                  );
+                  handleSubmit(handleDescriptionFormSubmit)().finally(() => setIsSubmitting("submitted"));
                 }}
               />
             )}
diff --git a/web/components/web-view/issues-select-bottom-sheet.tsx b/web/components/web-view/issues-select-bottom-sheet.tsx
index 266f29a76..80bf13795 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 43ef0aa36..877452579 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";
-
+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;
 
@@ -73,16 +69,12 @@ export const AssigneeSelect: 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"}
       >
         {value && value.length > 0 && Array.isArray(value) ? (
           <div className="-my-0.5 flex items-center gap-2">
             <Avatar user={selectedAssignees?.[0].member} />
-            <span className="text-custom-text-200 text-xs">
-              {selectedAssignees?.length} Assignees
-            </span>
+            <span className="text-custom-text-200 text-xs">{selectedAssignees?.length} Assignees</span>
           </div>
         ) : (
           <span className="text-custom-text-200">No assignees</span>
diff --git a/web/components/web-view/select-blocked-by.tsx b/web/components/web-view/select-blocked-by.tsx
index 97eaf6d95..f7b96b649 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-blocker-to.tsx b/web/components/web-view/select-blocker-to.tsx
index 8255d19f9..0ec098c6e 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 920eabf20..fdf1cebf0 100644
--- a/web/components/web-view/select-cycle.tsx
+++ b/web/components/web-view/select-cycle.tsx
@@ -8,34 +8,29 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import issuesService from "services/issues.service";
-import cyclesService from "services/cycles.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";
-
+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;
 
@@ -47,12 +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
   );
 
@@ -61,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,
@@ -80,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;
@@ -93,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));
@@ -107,11 +97,7 @@ export const CycleSelect: React.FC<Props> = (props) => {
 
   return (
     <>
-      <WebViewModal
-        isOpen={isBottomSheetOpen}
-        onClose={() => setIsBottomSheetOpen(false)}
-        modalTitle="Select Module"
-      >
+      <WebViewModal isOpen={isBottomSheetOpen} onClose={() => setIsBottomSheetOpen(false)} modalTitle="Select Module">
         <WebViewModal.Options
           options={[
             ...(incompleteCycles ?? []).map((cycle) => ({
diff --git a/web/components/web-view/select-duplicate.tsx b/web/components/web-view/select-duplicate.tsx
index 16899b833..ae28a215e 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-module.tsx b/web/components/web-view/select-module.tsx
index cd7fe9741..631b872fb 100644
--- a/web/components/web-view/select-module.tsx
+++ b/web/components/web-view/select-module.tsx
@@ -1,32 +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/modules.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";
-
+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";
 
@@ -35,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;
 
@@ -45,9 +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();
@@ -55,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,
@@ -86,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));
@@ -100,11 +86,7 @@ export const ModuleSelect: React.FC<Props> = (props) => {
 
   return (
     <>
-      <WebViewModal
-        isOpen={isBottomSheetOpen}
-        onClose={() => setIsBottomSheetOpen(false)}
-        modalTitle="Select Module"
-      >
+      <WebViewModal isOpen={isBottomSheetOpen} onClose={() => setIsBottomSheetOpen(false)} modalTitle="Select Module">
         <WebViewModal.Options
           options={[
             ...(modules ?? []).map((mod) => ({
@@ -137,9 +119,7 @@ export const ModuleSelect: React.FC<Props> = (props) => {
           "relative w-full px-2.5 py-0.5 text-base flex justify-between items-center gap-0.5 text-custom-text-100"
         }
       >
-        <span className="text-custom-text-200">
-          {value?.module_detail?.name ?? "Select module"}
-        </span>
+        <span className="text-custom-text-200">{value?.module_detail?.name ?? "Select module"}</span>
         <ChevronDown className="w-4 h-4 text-custom-text-200" />
       </button>
     </>
diff --git a/web/components/web-view/select-parent.tsx b/web/components/web-view/select-parent.tsx
index 792a30438..77bfe0055 100644
--- a/web/components/web-view/select-parent.tsx
+++ b/web/components/web-view/select-parent.tsx
@@ -1,24 +1,15 @@
-// react
 import React, { useState } from "react";
-
-// next
 import { useRouter } from "next/router";
-
-// swr
 import useSWR from "swr";
 
 // services
-import issuesService from "services/issues.service";
-
-// fetch key
+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";
 
@@ -28,6 +19,8 @@ type Props = {
   disabled?: boolean;
 };
 
+const issueService = new IssueService();
+
 export const ParentSelect: React.FC<Props> = (props) => {
   const { onChange, disabled = false } = props;
 
@@ -40,8 +33,7 @@ export const ParentSelect: React.FC<Props> = (props) => {
   const { data: issueDetails } = useSWR(
     workspaceSlug && projectId && issueId ? ISSUE_DETAILS(issueId.toString()) : null,
     workspaceSlug && projectId && issueId
-      ? () =>
-          issuesService.retrieve(workspaceSlug.toString(), projectId.toString(), issueId.toString())
+      ? () => issueService.retrieve(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
 
@@ -98,9 +90,7 @@ export const ParentSelect: React.FC<Props> = (props) => {
           onClick={() => {
             setIsParentModalOpen(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-relates-to.tsx b/web/components/web-view/select-relates-to.tsx
index 56e509d2f..47a7c7853 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 99c3cba2c..966a2f300 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/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;
 
@@ -40,7 +34,7 @@ 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)
+      ? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
   const states = getStatesList(stateGroups);
@@ -77,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 70aec3d48..167c6e871 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/issues.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,8 +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
   );
 
@@ -74,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)));
   };
@@ -85,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/activity-graph.tsx b/web/components/workspace/activity-graph.tsx
index 95d6d03b3..6036d0c69 100644
--- a/web/components/workspace/activity-graph.tsx
+++ b/web/components/workspace/activity-graph.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
 // ui
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // helpers
 import { renderDateFormat, renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
@@ -25,14 +25,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
   const fourMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 4, 1);
   const fiveMonthsAgo = new Date(today.getFullYear(), today.getMonth() - 5, 1);
 
-  const recentMonths = [
-    fiveMonthsAgo,
-    fourMonthsAgo,
-    threeMonthsAgo,
-    twoMonthsAgo,
-    lastMonth,
-    today,
-  ];
+  const recentMonths = [fiveMonthsAgo, fourMonthsAgo, threeMonthsAgo, twoMonthsAgo, lastMonth, today];
 
   const getDatesOfMonth = (dateOfMonth: Date) => {
     const month = dateOfMonth.getMonth();
@@ -112,9 +105,7 @@ export const ActivityGraph: React.FC<Props> = ({ activities }) => {
                   } activities on ${renderShortDateWithYearFormat(date)}`}
                 >
                   <div
-                    className={`${
-                      date === "" ? "pointer-events-none opacity-0" : ""
-                    } h-4 w-4 rounded ${
+                    className={`${date === "" ? "pointer-events-none opacity-0" : ""} h-4 w-4 rounded ${
                       isActive
                         ? `bg-custom-primary ${activitiesIntensity(isActive.activity_count)}`
                         : "bg-custom-background-80"
diff --git a/web/components/workspace/confirm-workspace-member-remove.tsx b/web/components/workspace/confirm-workspace-member-remove.tsx
index 9ca80c3dc..aa2f4cd4d 100644
--- a/web/components/workspace/confirm-workspace-member-remove.tsx
+++ b/web/components/workspace/confirm-workspace-member-remove.tsx
@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 
 type Props = {
   isOpen: boolean;
@@ -57,33 +57,29 @@ const ConfirmWorkspaceMemberRemove: React.FC<Props> = ({ isOpen, onClose, data,
                 <div className="bg-custom-background-80 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-100 sm:mx-0 sm:h-10 sm:w-10">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <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"
-                      >
+                      <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                         Remove {data?.display_name}?
                       </Dialog.Title>
                       <div className="mt-2">
                         <p className="text-sm text-custom-text-200">
                           Are you sure you want to remove member-{" "}
-                          <span className="font-bold">{data?.display_name}</span>? They will no
-                          longer have access to this workspace. This action cannot be undone.
+                          <span className="font-bold">{data?.display_name}</span>? They will no longer have access to
+                          this workspace. 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}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Removing..." : "Remove"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
diff --git a/web/components/workspace/create-workspace-form.tsx b/web/components/workspace/create-workspace-form.tsx
index c7eb584b9..a84bf4470 100644
--- a/web/components/workspace/create-workspace-form.tsx
+++ b/web/components/workspace/create-workspace-form.tsx
@@ -1,17 +1,15 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-
+import { Dispatch, SetStateAction, useEffect, useState, FC } from "react";
 import { mutate } from "swr";
-
-// react-hook-form
 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
-import { CustomSelect, Input, PrimaryButton } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
-import { ICurrentUserResponse, IWorkspace } from "types";
+import { IUser, IWorkspace } from "types";
 // fetch-keys
 import { USER_WORKSPACES } from "constants/fetch-keys";
 // constants
@@ -25,7 +23,7 @@ type Props = {
     organization_size: string;
   };
   setDefaultValues: Dispatch<SetStateAction<any>>;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   secondaryButton?: React.ReactNode;
   primaryButtonText?: {
     loading: string;
@@ -49,7 +47,9 @@ const restrictedUrls = [
   "workspace-member-invitation",
 ];
 
-export const CreateWorkspaceForm: React.FC<Props> = ({
+const workspaceService = new WorkspaceService();
+
+export const CreateWorkspaceForm: FC<Props> = ({
   onSubmit,
   defaultValues,
   setDefaultValues,
@@ -66,7 +66,6 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
   const { setToastAlert } = useToast();
 
   const {
-    register,
     handleSubmit,
     control,
     setValue,
@@ -90,11 +89,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
                 message: "Workspace created successfully.",
               });
 
-              mutate<IWorkspace[]>(
-                USER_WORKSPACES,
-                (prevData) => [res, ...(prevData ?? [])],
-                false
-              );
+              mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => [res, ...(prevData ?? [])], false);
               if (onSubmit) await onSubmit(res);
             })
             .catch(() =>
@@ -128,54 +123,61 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
       <div className="space-y-6 sm:space-y-7">
         <div className="space-y-1 text-sm">
           <label htmlFor="workspaceName">Workspace Name</label>
-          <Input
-            id="workspaceName"
+          <Controller
+            control={control}
             name="name"
-            register={register}
-            autoComplete="off"
-            onChange={(e) =>
-              setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"))
-            }
-            validations={{
+            rules={{
               required: "Workspace name is required",
               validate: (value) =>
-                /^[\w\s-]*$/.test(value) ||
-                `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
+                /^[\w\s-]*$/.test(value) || `Name can only contain (" "), ( - ), ( _ ) & alphanumeric characters.`,
               maxLength: {
                 value: 80,
                 message: "Workspace name should not exceed 80 characters",
               },
             }}
-            placeholder="Enter workspace name..."
-            error={errors.name}
+            render={({ field: { value, ref } }) => (
+              <Input
+                id="workspaceName"
+                name="name"
+                type="text"
+                value={value}
+                onChange={(e) => setValue("slug", e.target.value.toLocaleLowerCase().trim().replace(/ /g, "-"))}
+                ref={ref}
+                hasError={Boolean(errors.name)}
+                placeholder="Enter workspace name..."
+                className="w-full"
+              />
+            )}
           />
         </div>
         <div className="space-y-1 text-sm">
           <label htmlFor="workspaceUrl">Workspace URL</label>
           <div className="flex w-full items-center rounded-md border border-custom-border-200 px-3">
-            <span className="whitespace-nowrap text-sm text-custom-text-200">
-              {window && window.location.host}/
-            </span>
-            <Input
-              id="workspaceUrl"
-              mode="trueTransparent"
-              autoComplete="off"
+            <span className="whitespace-nowrap text-sm text-custom-text-200">{window && window.location.host}/</span>
+            <Controller
+              control={control}
               name="slug"
-              register={register}
-              className="block w-full rounded-md bg-transparent py-2 !px-0 text-sm"
-              validations={{
+              rules={{
                 required: "Workspace URL is required",
               }}
-              onChange={(e) =>
-                /^[a-zA-Z0-9_-]+$/.test(e.target.value)
-                  ? setInvalidSlug(false)
-                  : setInvalidSlug(true)
-              }
+              render={({ field: { value, ref } }) => (
+                <Input
+                  id="workspaceUrl"
+                  name="slug"
+                  type="text"
+                  value={value}
+                  onChange={(e) =>
+                    /^[a-zA-Z0-9_-]+$/.test(e.target.value) ? setInvalidSlug(false) : setInvalidSlug(true)
+                  }
+                  ref={ref}
+                  hasError={Boolean(errors.slug)}
+                  placeholder="Enter workspace name..."
+                  className="block rounded-md bg-transparent py-2 !px-0 text-sm w-full"
+                />
+              )}
             />
           </div>
-          {slugError && (
-            <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>
-          )}
+          {slugError && <span className="-mt-3 text-sm text-red-500">Workspace URL is already taken!</span>}
           {invalidSlug && (
             <span className="text-sm text-red-500">{`URL can only contain ( - ), ( _ ) & alphanumeric characters.`}</span>
           )}
@@ -216,9 +218,9 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
 
       <div className="flex items-center gap-4">
         {secondaryButton}
-        <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+        <Button variant="primary" type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
           {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
diff --git a/web/components/workspace/delete-workspace-modal.tsx b/web/components/workspace/delete-workspace-modal.tsx
index 80cf08cd1..1fbac7bf4 100644
--- a/web/components/workspace/delete-workspace-modal.tsx
+++ b/web/components/workspace/delete-workspace-modal.tsx
@@ -9,15 +9,15 @@ 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
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
 // ui
-import { DangerButton, Input, SecondaryButton } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // types
-import type { ICurrentUserResponse, IWorkspace } from "types";
+import type { IUser, IWorkspace } from "types";
 // fetch-keys
 import { USER_WORKSPACES } from "constants/fetch-keys";
 
@@ -25,7 +25,7 @@ type Props = {
   isOpen: boolean;
   data: IWorkspace | null;
   onClose: () => void;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
 };
 
 const defaultValues = {
@@ -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();
 
@@ -40,14 +43,13 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
 
   const {
     control,
-    formState: { isSubmitting },
+    formState: { errors, isSubmitting },
     handleSubmit,
     reset,
     watch,
   } = useForm({ defaultValues });
 
-  const canDelete =
-    watch("workspaceName") === data?.name && watch("confirmDelete") === "delete my workspace";
+  const canDelete = watch("workspaceName") === data?.name && watch("confirmDelete") === "delete my workspace";
 
   const handleClose = () => {
     const timer = setTimeout(() => {
@@ -68,10 +70,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
 
         router.push("/");
 
-        mutate<IWorkspace[]>(
-          USER_WORKSPACES,
-          (prevData) => prevData?.filter((workspace) => workspace.id !== data.id)
-        );
+        mutate<IWorkspace[]>(USER_WORKSPACES, (prevData) => prevData?.filter((workspace) => workspace.id !== data.id));
 
         setToastAlert({
           type: "success",
@@ -118,10 +117,7 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                 <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
                     <span className="place-items-center rounded-full bg-red-500/20 p-4">
-                      <ExclamationTriangleIcon
-                        className="h-6 w-6 text-red-600"
-                        aria-hidden="true"
-                      />
+                      <ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
                     </span>
                     <span className="flex items-center justify-start">
                       <h3 className="text-xl font-medium 2xl:text-2xl">Delete Workspace</h3>
@@ -131,28 +127,30 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
                   <span>
                     <p className="text-sm leading-7 text-custom-text-200">
                       Are you sure you want to delete workspace{" "}
-                      <span className="break-words font-semibold">{data?.name}</span>? All of the
-                      data related to the workspace will be permanently removed. This action cannot
-                      be undone.
+                      <span className="break-words font-semibold">{data?.name}</span>? All of the data related to the
+                      workspace will be permanently removed. This action cannot be undone.
                     </p>
                   </span>
 
                   <div className="text-custom-text-200">
                     <p className="break-words text-sm ">
-                      Enter the workspace name{" "}
-                      <span className="font-medium text-custom-text-100">{data?.name}</span> to
+                      Enter the workspace name <span className="font-medium text-custom-text-100">{data?.name}</span> to
                       continue:
                     </p>
                     <Controller
                       control={control}
                       name="workspaceName"
-                      render={({ field: { onChange, value } }) => (
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="workspaceName"
+                          name="workspaceName"
                           type="text"
-                          placeholder="Workspace name"
-                          className="mt-2"
-                          onChange={onChange}
                           value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.workspaceName)}
+                          placeholder="Workspace name"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
@@ -160,30 +158,35 @@ export const DeleteWorkspaceModal: React.FC<Props> = ({ isOpen, data, onClose, u
 
                   <div className="text-custom-text-200">
                     <p className="text-sm">
-                      To confirm, type{" "}
-                      <span className="font-medium text-custom-text-100">delete my workspace</span>{" "}
+                      To confirm, type <span className="font-medium text-custom-text-100">delete my workspace</span>{" "}
                       below:
                     </p>
                     <Controller
                       control={control}
                       name="confirmDelete"
-                      render={({ field: { onChange, value } }) => (
+                      render={({ field: { value, onChange, ref } }) => (
                         <Input
+                          id="confirmDelete"
+                          name="confirmDelete"
                           type="text"
-                          placeholder="Enter 'delete my workspace'"
-                          className="mt-2"
-                          onChange={onChange}
                           value={value}
+                          onChange={onChange}
+                          ref={ref}
+                          hasError={Boolean(errors.confirmDelete)}
+                          placeholder="Enter 'delete my workspace'"
+                          className="mt-2 w-full"
                         />
                       )}
                     />
                   </div>
 
                   <div className="flex justify-end gap-2">
-                    <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                    <DangerButton type="submit" disabled={!canDelete} loading={isSubmitting}>
+                    <Button variant="neutral-primary" onClick={handleClose}>
+                      Cancel
+                    </Button>
+                    <Button variant="danger" type="submit" disabled={!canDelete} loading={isSubmitting}>
                       {isSubmitting ? "Deleting..." : "Delete Workspace"}
-                    </DangerButton>
+                    </Button>
                   </div>
                 </form>
               </Dialog.Panel>
diff --git a/web/components/workspace/help-section.tsx b/web/components/workspace/help-section.tsx
index 9f35f337c..097ed188f 100644
--- a/web/components/workspace/help-section.tsx
+++ b/web/components/workspace/help-section.tsx
@@ -1,6 +1,7 @@
 import React, { useRef, useState } from "react";
 import Link from "next/link";
 import { Transition } from "@headlessui/react";
+import { observer } from "mobx-react-lite";
 
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
@@ -38,14 +39,15 @@ const helpOptions = [
 ];
 
 export interface WorkspaceHelpSectionProps {
-  setSidebarActive: React.Dispatch<React.SetStateAction<boolean>>;
+  setSidebarActive?: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setSidebarActive }) => {
-  const store: any = useMobxStore();
-
+export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(() => {
+  // store
+  const { theme: themeStore } = useMobxStore();
+  // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
-
+  // refs
   const helpOptionsRef = useRef<HTMLDivElement | null>(null);
 
   useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
@@ -54,23 +56,23 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
     <>
       <div
         className={`flex w-full items-center justify-between gap-1 self-baseline border-t border-custom-border-200 bg-custom-sidebar-background-100 py-2 px-4 ${
-          store?.theme?.sidebarCollapsed ? "flex-col" : ""
+          themeStore?.sidebarCollapsed ? "flex-col" : ""
         }`}
       >
-        {!store?.theme?.sidebarCollapsed && (
+        {!themeStore?.sidebarCollapsed && (
           <div className="w-1/2 text-center cursor-default rounded-md px-2.5 py-1.5 font-medium outline-none text-sm bg-green-500/10 text-green-500">
             Free Plan
           </div>
         )}
         <div
           className={`flex items-center gap-1 ${
-            store?.theme?.sidebarCollapsed ? "flex-col justify-center" : "justify-evenly w-1/2"
+            themeStore?.sidebarCollapsed ? "flex-col justify-center" : "justify-evenly w-1/2"
           }`}
         >
           <button
             type="button"
             className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
-              store?.theme?.sidebarCollapsed ? "w-full" : ""
+              themeStore?.sidebarCollapsed ? "w-full" : ""
             }`}
             onClick={() => {
               const e = new KeyboardEvent("keydown", {
@@ -84,7 +86,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
           <button
             type="button"
             className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
-              store?.theme?.sidebarCollapsed ? "w-full" : ""
+              themeStore?.sidebarCollapsed ? "w-full" : ""
             }`}
             onClick={() => setIsNeedHelpOpen((prev) => !prev)}
           >
@@ -93,20 +95,20 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
           <button
             type="button"
             className="grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none md:hidden"
-            onClick={() => setSidebarActive(false)}
+            onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)}
           >
             <WestOutlined fontSize="small" />
           </button>
           <button
             type="button"
             className={`hidden md:grid place-items-center rounded-md p-1.5 text-custom-text-200 hover:text-custom-text-100 hover:bg-custom-background-90 outline-none ${
-              store?.theme?.sidebarCollapsed ? "w-full" : ""
+              themeStore?.sidebarCollapsed ? "w-full" : ""
             }`}
-            onClick={() => store.theme.setSidebarCollapsed(!store?.theme?.sidebarCollapsed)}
+            onClick={() => themeStore.setSidebarCollapsed(!themeStore?.sidebarCollapsed)}
           >
             <WestOutlined
               fontSize="small"
-              className={`duration-300 ${store?.theme?.sidebarCollapsed ? "rotate-180" : ""}`}
+              className={`duration-300 ${themeStore?.sidebarCollapsed ? "rotate-180" : ""}`}
             />
           </button>
         </div>
@@ -123,7 +125,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
           >
             <div
               className={`absolute bottom-2 min-w-[10rem] ${
-                store?.theme?.sidebarCollapsed ? "left-full" : "-left-[75px]"
+                themeStore?.sidebarCollapsed ? "left-full" : "-left-[75px]"
               } rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs whitespace-nowrap divide-y divide-custom-border-200`}
               ref={helpOptionsRef}
             >
@@ -166,4 +168,4 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
       </div>
     </>
   );
-};
+});
diff --git a/web/components/workspace/index.ts b/web/components/workspace/index.ts
index bb0f28a93..a3fcfc03c 100644
--- a/web/components/workspace/index.ts
+++ b/web/components/workspace/index.ts
@@ -1,3 +1,4 @@
+export * from "./views";
 export * from "./activity-graph";
 export * from "./completed-issues-graph";
 export * from "./create-workspace-form";
diff --git a/web/components/workspace/issues-list.tsx b/web/components/workspace/issues-list.tsx
index 0cb8416c0..a27951280 100644
--- a/web/components/workspace/issues-list.tsx
+++ b/web/components/workspace/issues-list.tsx
@@ -8,7 +8,7 @@ import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 import { truncateText } from "helpers/string.helper";
 // types
 import { IIssueLite } from "types";
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 import { LayerDiagonalIcon } from "components/icons";
 
 type Props = {
@@ -55,24 +55,15 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
                 const dateDifference = getDateDifference(new Date(date as string));
 
                 return (
-                  <Link
-                    href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`}
-                    key={issue.id}
-                  >
+                  <Link href={`/${workspaceSlug}/projects/${issue.project_id}/issues/${issue.id}`} key={issue.id}>
                     <a>
                       <div className="grid grid-cols-4 gap-2 px-3 py-2">
                         <h5
                           className={`flex cursor-default items-center gap-2 ${
-                            type === "overdue"
-                              ? dateDifference > 6
-                                ? "text-red-500"
-                                : "text-yellow-400"
-                              : ""
+                            type === "overdue" ? (dateDifference > 6 ? "text-red-500" : "text-yellow-400") : ""
                           }`}
                         >
-                          {type === "overdue" && (
-                            <ExclamationTriangleIcon className="h-3.5 w-3.5" />
-                          )}
+                          {type === "overdue" && <ExclamationTriangleIcon className="h-3.5 w-3.5" />}
                           {dateDifference} {dateDifference > 1 ? "days" : "day"}
                         </h5>
                         <h5 className="col-span-2">{truncateText(issue.name, 30)}</h5>
@@ -89,8 +80,7 @@ export const IssuesList: React.FC<Props> = ({ issues, type }) => {
                 <div className="my-5 flex flex-col items-center gap-4">
                   <LayerDiagonalIcon height={60} width={60} />
                   <span className="text-custom-text-200">
-                    No issues found. Use{" "}
-                    <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>{" "}
+                    No issues found. Use <pre className="inline rounded bg-custom-background-80 px-2 py-1">C</pre>{" "}
                     shortcut to create a new issue
                   </span>
                 </div>
diff --git a/web/components/workspace/issues-stats.tsx b/web/components/workspace/issues-stats.tsx
index 2c874d503..a025306ff 100644
--- a/web/components/workspace/issues-stats.tsx
+++ b/web/components/workspace/issues-stats.tsx
@@ -1,7 +1,7 @@
 // components
 import { ActivityGraph } from "components/workspace";
 // ui
-import { Loader, Tooltip } from "components/ui";
+import { Loader, Tooltip } from "@plane/ui";
 // icons
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
 // types
@@ -23,10 +23,7 @@ export const IssuesStats: React.FC<Props> = ({ data }) => {
             <h4 className="text-sm">Issues assigned to you</h4>
             <h5 className="mt-2 text-2xl font-semibold">
               {data ? (
-                <div
-                  className="cursor-pointer"
-                  onClick={() => router.push(`/${workspaceSlug}/me/my-issues`)}
-                >
+                <div className="cursor-pointer" onClick={() => router.push(`/${workspaceSlug}/me/my-issues`)}>
                   {data.assigned_issues_count}
                 </div>
               ) : (
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index c9d090405..5422c147d 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -1,21 +1,18 @@
 import React, { useEffect } from "react";
-
-// swr
 import { mutate } from "swr";
-// react-hook-form
 import { Controller, useFieldArray, useForm } from "react-hook-form";
-// headless
 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
-import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { CustomSelect } from "components/ui";
+import { Button, Input } from "@plane/ui";
 // icons
 import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
 // types
-import { ICurrentUserResponse } from "types";
+import { IUser } from "types";
 // constants
 import { ROLE } from "constants/workspace";
 import { WORKSPACE_INVITATIONS } from "constants/fetch-keys";
@@ -24,7 +21,7 @@ type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
   workspace_slug: string;
-  user: ICurrentUserResponse | undefined;
+  user: IUser | undefined;
   onSuccess: () => void;
 };
 
@@ -46,6 +43,8 @@ const defaultValues: FormValues = {
   ],
 };
 
+const workspaceService = new WorkspaceService();
+
 const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
   const { isOpen, setIsOpen, workspace_slug, user, onSuccess } = props;
   const {
@@ -77,7 +76,7 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
 
     await workspaceService
       .inviteWorkspace(workspace_slug, payload, user)
-      .then(async (res) => {
+      .then(async () => {
         setIsOpen(false);
         handleClose();
         setToastAlert({
@@ -145,16 +144,11 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                   }}
                 >
                   <div className="space-y-5">
-                    <Dialog.Title
-                      as="h3"
-                      className="text-lg font-medium leading-6 text-custom-text-100"
-                    >
+                    <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-custom-text-100">
                       Invite people to collaborate
                     </Dialog.Title>
                     <div className="mt-2">
-                      <p className="text-sm text-custom-text-200">
-                        Invite members to work on your workspace.
-                      </p>
+                      <p className="text-sm text-custom-text-200">Invite members to work on your workspace.</p>
                     </div>
 
                     <div className="space-y-4 mb-3">
@@ -171,12 +165,18 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                                   message: "Invalid Email ID",
                                 },
                               }}
-                              render={({ field }) => (
+                              render={({ field: { value, onChange, ref } }) => (
                                 <>
                                   <Input
-                                    {...field}
-                                    className="text-xs sm:text-sm"
+                                    id={`emails.${index}.email`}
+                                    name={`emails.${index}.email`}
+                                    type="text"
+                                    value={value}
+                                    onChange={onChange}
+                                    ref={ref}
+                                    hasError={Boolean(errors.emails?.[index]?.email)}
                                     placeholder="Enter their email..."
+                                    className="text-xs sm:text-sm w-full"
                                   />
                                   {errors.emails?.[index]?.email && (
                                     <span className="ml-1 text-red-500 text-xs">
@@ -233,10 +233,12 @@ const SendWorkspaceInvitationModal: React.FC<Props> = (props) => {
                       Add more
                     </button>
                     <div className="flex items-center gap-2">
-                      <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-                      <PrimaryButton type="submit" loading={isSubmitting}>
+                      <Button variant="neutral-primary" onClick={handleClose}>
+                        Cancel
+                      </Button>
+                      <Button variant="primary" type="submit" loading={isSubmitting}>
                         {isSubmitting ? "Sending Invitation..." : "Send Invitation"}
-                      </PrimaryButton>
+                      </Button>
                     </div>
                   </div>
                 </form>
diff --git a/web/components/workspace/sidebar-dropdown.tsx b/web/components/workspace/sidebar-dropdown.tsx
index f3bbc029b..ecd1c1249 100644
--- a/web/components/workspace/sidebar-dropdown.tsx
+++ b/web/components/workspace/sidebar-dropdown.tsx
@@ -7,14 +7,14 @@ import { Menu, Transition } from "@headlessui/react";
 import { useTheme } from "next-themes";
 // hooks
 import useUser from "hooks/use-user";
-import useThemeHook from "hooks/use-theme";
 import useWorkspaces from "hooks/use-workspaces";
 import useToast from "hooks/use-toast";
 // services
-import userService from "services/user.service";
-import authenticationService from "services/authentication.service";
+import { UserService } from "services/user.service";
+import { AuthService } from "services/auth.service";
 // components
-import { Avatar, Icon, Loader } from "components/ui";
+import { Avatar, Icon } from "components/ui";
+import { Loader } from "@plane/ui";
 // icons
 import { CheckIcon, PlusIcon } from "@heroicons/react/24/outline";
 // helpers
@@ -53,6 +53,9 @@ const profileLinks = (workspaceSlug: string, userId: string) => [
   },
 ];
 
+const userService = new UserService();
+const authService = new AuthService();
+
 export const WorkspaceSidebarDropdown = () => {
   const store: any = useMobxStore();
 
@@ -86,7 +89,7 @@ export const WorkspaceSidebarDropdown = () => {
   };
 
   const handleSignOut = async () => {
-    await authenticationService
+    await authService
       .signOut()
       .then(() => {
         mutateUser(undefined);
@@ -149,7 +152,7 @@ export const WorkspaceSidebarDropdown = () => {
               {workspaces ? (
                 <div className="flex h-full w-full flex-col items-start justify-start gap-1.5">
                   {workspaces.length > 0 ? (
-                    workspaces.map((workspace) => (
+                    workspaces.map((workspace: IWorkspace) => (
                       <Menu.Item key={workspace.id}>
                         {() => (
                           <button
@@ -171,9 +174,7 @@ export const WorkspaceSidebarDropdown = () => {
                               </span>
 
                               <h5
-                                className={`text-sm ${
-                                  workspaceSlug === workspace.slug ? "" : "text-custom-text-200"
-                                }`}
+                                className={`text-sm ${workspaceSlug === workspace.slug ? "" : "text-custom-text-200"}`}
                               >
                                 {truncateText(workspace.name, 18)}
                               </h5>
@@ -261,18 +262,16 @@ export const WorkspaceSidebarDropdown = () => {
             >
               <div className="flex flex-col gap-2.5 pb-2">
                 <span className="px-2 text-custom-sidebar-text-200">{user?.email}</span>
-                {profileLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map(
-                  (link, index) => (
-                    <Menu.Item key={index} as="button" type="button">
-                      <Link href={link.link}>
-                        <a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
-                          <Icon iconName={link.icon} className="!text-lg !leading-5" />
-                          {link.name}
-                        </a>
-                      </Link>
-                    </Menu.Item>
-                  )
-                )}
+                {profileLinks(workspaceSlug?.toString() ?? "", user?.id ?? "").map((link, index) => (
+                  <Menu.Item key={index} as="button" type="button">
+                    <Link href={link.link}>
+                      <a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
+                        <Icon iconName={link.icon} className="!text-lg !leading-5" />
+                        {link.name}
+                      </a>
+                    </Link>
+                  </Menu.Item>
+                ))}
               </div>
               <div className="pt-2">
                 <Menu.Item
diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
index d6c6ee3f9..af06b2c38 100644
--- a/web/components/workspace/sidebar-menu.tsx
+++ b/web/components/workspace/sidebar-menu.tsx
@@ -1,20 +1,14 @@
 import React from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-// hooks
-import useTheme from "hooks/use-theme";
 // components
 import { NotificationPopover } from "components/notifications";
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // icons
-import {
-  BarChartRounded,
-  GridViewOutlined,
-  TaskAltOutlined,
-  WorkOutlineOutlined,
-} from "@mui/icons-material";
+import { BarChartRounded, GridViewOutlined, TaskAltOutlined, WorkOutlineOutlined } from "@mui/icons-material";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
 
 const workspaceLinks = (workspaceSlug: string) => [
   {
@@ -39,21 +33,16 @@ const workspaceLinks = (workspaceSlug: string) => [
   },
 ];
 
-export const WorkspaceSidebarMenu = () => {
-  const store: any = useMobxStore();
-
+export const WorkspaceSidebarMenu = observer(() => {
+  const { theme: themeStore } = useMobxStore();
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const { collapsed: sidebarCollapse } = useTheme();
-
   return (
     <div className="w-full cursor-pointer space-y-1 p-4">
       {workspaceLinks(workspaceSlug as string).map((link, index) => {
-        const isActive =
-          link.name === "Settings"
-            ? router.asPath.includes(link.href)
-            : router.asPath === link.href;
+        const isActive = link.name === "Settings" ? router.asPath.includes(link.href) : router.asPath === link.href;
 
         return (
           <Link key={index} href={link.href}>
@@ -62,17 +51,17 @@ export const WorkspaceSidebarMenu = () => {
                 tooltipContent={link.name}
                 position="right"
                 className="ml-2"
-                disabled={!store?.theme?.sidebarCollapsed}
+                disabled={!themeStore?.sidebarCollapsed}
               >
                 <div
                   className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium outline-none ${
                     isActive
                       ? "bg-custom-primary-100/10 text-custom-primary-100"
                       : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
-                  } ${store?.theme?.sidebarCollapsed ? "justify-center" : ""}`}
+                  } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
                 >
                   {<link.Icon fontSize="small" />}
-                  {!store?.theme?.sidebarCollapsed && link.name}
+                  {!themeStore?.sidebarCollapsed && link.name}
                 </div>
               </Tooltip>
             </a>
@@ -83,4 +72,4 @@ export const WorkspaceSidebarMenu = () => {
       <NotificationPopover />
     </div>
   );
-};
+});
diff --git a/web/components/workspace/sidebar-quick-action.tsx b/web/components/workspace/sidebar-quick-action.tsx
index 1c614f694..52b0276ae 100644
--- a/web/components/workspace/sidebar-quick-action.tsx
+++ b/web/components/workspace/sidebar-quick-action.tsx
@@ -52,13 +52,8 @@ export const WorkspaceSidebarQuickAction = () => {
               document.dispatchEvent(e);
             }}
           >
-            <Icon
-              iconName="edit_square"
-              className="!text-lg !leading-4 text-custom-sidebar-text-300"
-            />
-            {!store?.theme?.sidebarCollapsed && (
-              <span className="text-sm font-medium">New Issue</span>
-            )}
+            <Icon iconName="edit_square" className="!text-lg !leading-4 text-custom-sidebar-text-300" />
+            {!store?.theme?.sidebarCollapsed && <span className="text-sm font-medium">New Issue</span>}
           </button>
 
           {storedValue && Object.keys(JSON.parse(storedValue)).length > 0 && (
@@ -91,10 +86,7 @@ export const WorkspaceSidebarQuickAction = () => {
                     onClick={() => setIsDraftIssueModalOpen(true)}
                     className="w-full flex text-sm items-center rounded flex-shrink-0 py-[10px] px-3 bg-custom-background-100 shadow border-[0.5px] border-custom-border-300 text-custom-text-300"
                   >
-                    <PenSquare
-                      size={16}
-                      className="!text-lg !leading-4 text-custom-sidebar-text-300 mr-2"
-                    />
+                    <PenSquare size={16} className="!text-lg !leading-4 text-custom-sidebar-text-300 mr-2" />
                     Last Drafted Issue
                   </button>
                 </div>
diff --git a/web/components/workspace/views/default-view-list-item.tsx b/web/components/workspace/views/default-view-list-item.tsx
new file mode 100644
index 000000000..e3298daee
--- /dev/null
+++ b/web/components/workspace/views/default-view-list-item.tsx
@@ -0,0 +1,36 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+
+// icons
+import { Sparkles } from "lucide-react";
+// helpers
+import { truncateText } from "helpers/string.helper";
+
+type Props = { view: { key: string; label: string } };
+
+export const GlobalDefaultViewListItem: React.FC<Props> = observer((props) => {
+  const { view } = props;
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  return (
+    <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
+      <Link href={`/${workspaceSlug}/workspace-views/${view.key}`}>
+        <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="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
+                <Sparkles size={14} strokeWidth={2} />
+              </div>
+              <div className="flex flex-col">
+                <p className="truncate text-sm leading-4 font-medium">{truncateText(view.label, 75)}</p>
+              </div>
+            </div>
+          </div>
+        </a>
+      </Link>
+    </div>
+  );
+});
diff --git a/web/components/workspace/views/delete-workspace-view-modal.tsx b/web/components/workspace/views/delete-view-modal.tsx
similarity index 64%
rename from web/components/workspace/views/delete-workspace-view-modal.tsx
rename to web/components/workspace/views/delete-view-modal.tsx
index 6030f630f..28f351037 100644
--- a/web/components/workspace/views/delete-workspace-view-modal.tsx
+++ b/web/components/workspace/views/delete-view-modal.tsx
@@ -1,73 +1,62 @@
 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";
+import { observer } from "mobx-react-lite";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { DangerButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/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 = {
+  data: IWorkspaceView;
   isOpen: boolean;
-  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  data: IWorkspaceView | null;
+  onClose: () => void;
 };
 
-export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsOpen }) => {
+export const DeleteGlobalViewModal: React.FC<Props> = observer((props) => {
+  const { data, isOpen, onClose } = props;
+
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { globalViews: globalViewsStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
   const handleClose = () => {
-    setIsOpen(false);
-    setIsDeleteLoading(false);
+    onClose();
   };
 
   const handleDeletion = async () => {
+    if (!workspaceSlug) return;
+
     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(() => {
+    await globalViewsStore
+      .deleteGlobalView(workspaceSlug.toString(), data.id)
+      .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
-          message: "View could not be deleted. Please try again.",
-        });
-      })
+          message: "Something went wrong while deleting the view. Please try again.",
+        })
+      )
       .finally(() => {
         setIsDeleteLoading(false);
+        handleClose();
       });
+
+    // remove filters from local storage
+    localStorage.removeItem(`global_view_filters/${data.id}`);
   };
 
   return (
@@ -100,36 +89,29 @@ export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsO
                 <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"
-                      />
+                      <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"
-                      >
+                      <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.
+                          <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}>
+                  <Button variant="neutral-primary" onClick={handleClose}>
+                    Cancel
+                  </Button>
+                  <Button variant="danger" onClick={handleDeletion} loading={isDeleteLoading}>
                     {isDeleteLoading ? "Deleting..." : "Delete"}
-                  </DangerButton>
+                  </Button>
                 </div>
               </Dialog.Panel>
             </Transition.Child>
@@ -138,4 +120,4 @@ export const DeleteWorkspaceViewModal: React.FC<Props> = ({ isOpen, data, setIsO
       </Dialog>
     </Transition.Root>
   );
-};
+});
diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx
index b16d61399..5524555e0 100644
--- a/web/components/workspace/views/form.tsx
+++ b/web/components/workspace/views/form.tsx
@@ -1,38 +1,23 @@
 import { useEffect } from "react";
-
 import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// services
-import issuesService from "services/issues.service";
-
+import { observer } from "mobx-react-lite";
+import { Controller, useForm } from "react-hook-form";
 // hooks
-import useProjects from "hooks/use-projects";
-import useWorkspaceMembers from "hooks/use-workspace-members";
+import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import { WorkspaceFiltersList } from "components/core";
-import { GlobalSelectFilters } from "components/workspace/views/global-select-filters";
-
+import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues";
 // ui
-import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
-// helpers
-import { checkIfArraysHaveSameElements } from "helpers/array.helper";
+import { Button, Input, TextArea } from "@plane/ui";
 // types
-import { IQuery } from "types";
-import { IWorkspaceView } from "types/workspace-views";
-// fetch-keys
-import { WORKSPACE_LABELS } from "constants/fetch-keys";
-import { STATE_GROUP } from "constants/project";
+import { IWorkspaceView } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
 
 type Props = {
-  handleFormSubmit: (values: IWorkspaceView) => Promise<void>;
+  handleFormSubmit: (values: Partial<IWorkspaceView>) => Promise<void>;
   handleClose: () => void;
-  status: boolean;
-  data?: IWorkspaceView | null;
-  preLoadedData?: Partial<IWorkspaceView> | null;
+  data?: IWorkspaceView;
+  preLoadedData?: Partial<IWorkspaceView>;
 };
 
 const defaultValues: Partial<IWorkspaceView> = {
@@ -40,41 +25,26 @@ const defaultValues: Partial<IWorkspaceView> = {
   description: "",
 };
 
-export const WorkspaceViewForm: React.FC<Props> = ({
-  handleFormSubmit,
-  handleClose,
-  status,
-  data,
-  preLoadedData,
-}) => {
+export const WorkspaceViewForm: React.FC<Props> = observer((props) => {
+  const { handleFormSubmit, handleClose, data, preLoadedData } = props;
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { workspace: workspaceStore, project: projectStore } = useMobxStore();
+
   const {
-    register,
     formState: { errors, isSubmitting },
     handleSubmit,
+    control,
     reset,
-    watch,
     setValue,
-  } = useForm<any>({
+    watch,
+  } = useForm({
     defaultValues,
   });
-  const filters = watch("query");
 
-  const { data: labelOptions } = useSWR(
-    workspaceSlug ? WORKSPACE_LABELS(workspaceSlug.toString()) : null,
-    workspaceSlug ? () => issuesService.getWorkspaceLabels(workspaceSlug.toString()) : null
-  );
-
-  const { workspaceMembers } = useWorkspaceMembers(workspaceSlug?.toString() ?? "");
-
-  const memberOptions = workspaceMembers?.map((m) => m.member);
-
-  const { projects: allProjects } = useProjects();
-  const joinedProjects = allProjects?.filter((p) => p.is_member);
-
-  const handleCreateUpdateView = async (formData: IWorkspaceView) => {
+  const handleCreateUpdateView = async (formData: Partial<IWorkspaceView>) => {
     await handleFormSubmit(formData);
 
     reset({
@@ -82,20 +52,6 @@ export const WorkspaceViewForm: React.FC<Props> = ({
     });
   };
 
-  const clearAllFilters = () => {
-    setValue("query", {
-      assignees: null,
-      created_by: null,
-      subscriber: null,
-      labels: null,
-      priority: null,
-      state_group: null,
-      start_date: null,
-      target_date: null,
-      project: null,
-    });
-  };
-
   useEffect(() => {
     reset({
       ...defaultValues,
@@ -104,110 +60,123 @@ export const WorkspaceViewForm: React.FC<Props> = ({
     });
   }, [data, preLoadedData, reset]);
 
-  useEffect(() => {
-    if (status && data) {
-      setValue("query", data.query_data);
-    }
-  }, [data, status, setValue]);
+  const selectedFilters = watch("query_data")?.filters;
+
+  const clearAllFilters = () => {
+    if (!selectedFilters) return;
+
+    setValue("query_data.filters", {});
+  };
 
   return (
     <form onSubmit={handleSubmit(handleCreateUpdateView)}>
       <div className="space-y-5">
-        <h3 className="text-lg font-medium leading-6 text-custom-text-100">
-          {status ? "Update" : "Create"} View
-        </h3>
+        <h3 className="text-lg font-medium leading-6 text-custom-text-100">{data ? "Update" : "Create"} View</h3>
         <div className="space-y-3">
           <div>
-            <Input
-              id="name"
+            <Controller
+              control={control}
               name="name"
-              type="name"
-              placeholder="Title"
-              autoComplete="off"
-              className="resize-none text-xl"
-              error={errors.name}
-              register={register}
-              validations={{
+              rules={{
                 required: "Title is required",
                 maxLength: {
                   value: 255,
                   message: "Title should be less than 255 characters",
                 },
               }}
+              render={({ field: { value, onChange, ref } }) => (
+                <Input
+                  id="name"
+                  name="name"
+                  type="name"
+                  value={value}
+                  onChange={onChange}
+                  ref={ref}
+                  hasError={Boolean(errors.name)}
+                  placeholder="Title"
+                  className="resize-none text-xl w-full"
+                />
+              )}
             />
           </div>
           <div>
-            <TextArea
-              id="description"
+            <Controller
               name="description"
-              placeholder="Description"
-              className="h-32 resize-none text-sm"
-              error={errors.description}
-              register={register}
+              control={control}
+              render={({ field: { value, onChange } }) => (
+                <TextArea
+                  id="description"
+                  name="description"
+                  value={value}
+                  placeholder="Description"
+                  onChange={onChange}
+                  className="h-32 resize-none text-sm"
+                  hasError={Boolean(errors?.description)}
+                />
+              )}
             />
           </div>
           <div>
-            <GlobalSelectFilters
-              filters={filters}
-              onSelect={(option) => {
-                const key = option.key as keyof typeof filters;
+            <Controller
+              control={control}
+              name="query_data.filters"
+              render={({ field: { onChange, value: filters } }) => (
+                <FiltersDropdown title="Filters">
+                  <FilterSelection
+                    filters={filters ?? {}}
+                    handleFiltersUpdate={(key, value) => {
+                      const newValues = filters?.[key] ?? [];
 
-                if (key === "start_date" || key === "target_date") {
-                  const valueExists = checkIfArraysHaveSameElements(
-                    filters?.[key] ?? [],
-                    option.value
-                  );
+                      if (Array.isArray(value)) {
+                        value.forEach((val) => {
+                          if (!newValues.includes(val)) newValues.push(val);
+                        });
+                      } else {
+                        if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
+                        else newValues.push(value);
+                      }
 
-                  setValue("query", {
-                    ...filters,
-                    [key]: valueExists ? null : option.value,
-                  } as IQuery);
-                } else {
-                  if (!filters?.[key]?.includes(option.value))
-                    setValue("query", {
-                      ...filters,
-                      [key]: [...((filters?.[key] as any[]) ?? []), option.value],
-                    });
-                  else {
-                    setValue("query", {
-                      ...filters,
-                      [key]: (filters?.[key] as any[])?.filter((item) => item !== option.value),
-                    });
-                  }
-                }
-              }}
-            />
-          </div>
-          <div>
-            <WorkspaceFiltersList
-              filters={filters}
-              labels={labelOptions}
-              members={memberOptions}
-              project={joinedProjects}
-              stateGroup={STATE_GROUP}
-              clearAllFilters={clearAllFilters}
-              setFilters={(query: any) => {
-                setValue("query", {
-                  ...filters,
-                  ...query,
-                });
-              }}
+                      onChange({
+                        ...filters,
+                        [key]: newValues,
+                      });
+                    }}
+                    layoutDisplayFiltersOptions={ISSUE_DISPLAY_FILTERS_BY_LAYOUT.my_issues.spreadsheet}
+                    labels={workspaceStore.workspaceLabels ?? undefined}
+                    projects={workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : undefined}
+                  />
+                </FiltersDropdown>
+              )}
             />
           </div>
+          {selectedFilters && Object.keys(selectedFilters).length > 0 && (
+            <div>
+              <AppliedFiltersList
+                appliedFilters={selectedFilters}
+                handleClearAllFilters={clearAllFilters}
+                handleRemoveFilter={() => {}}
+                labels={workspaceStore.workspaceLabels ?? undefined}
+                members={workspaceStore.workspaceMembers?.map((m) => m.member) ?? undefined}
+                states={undefined}
+              />
+            </div>
+          )}
         </div>
       </div>
       <div className="mt-5 flex justify-end gap-2">
-        <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
-        <PrimaryButton type="submit" loading={isSubmitting}>
-          {status
+        <Button variant="neutral-primary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button variant="primary" type="submit" loading={isSubmitting}>
+          {data
             ? isSubmitting
               ? "Updating View..."
               : "Update View"
             : isSubmitting
             ? "Creating View..."
             : "Create View"}
-        </PrimaryButton>
+        </Button>
       </div>
     </form>
   );
-};
+});
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 967ee1bf8..000000000
--- 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/header.tsx b/web/components/workspace/views/header.tsx
new file mode 100644
index 000000000..6c782e4c7
--- /dev/null
+++ b/web/components/workspace/views/header.tsx
@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { CreateUpdateWorkspaceViewModal } from "components/workspace";
+// icon
+import { PlusIcon } from "lucide-react";
+// constants
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
+
+export const GlobalViewsHeader: React.FC = observer(() => {
+  const [createViewModal, setCreateViewModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug ? `GLOBAL_VIEWS_LIST_${workspaceSlug.toString()}` : null,
+    workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
+  );
+
+  // bring the active view to the centre of the header
+  useEffect(() => {
+    if (!globalViewId) return;
+
+    const activeTabElement = document.querySelector(`#global-view-${globalViewId.toString()}`);
+
+    if (activeTabElement) activeTabElement.scrollIntoView({ behavior: "smooth", inline: "center" });
+  }, [globalViewId]);
+
+  const isTabSelected = (tabKey: string) => router.pathname.includes(tabKey);
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
+      <div className="group flex items-center px-4 w-full overflow-x-scroll relative border-b border-custom-border-200">
+        {DEFAULT_GLOBAL_VIEWS_LIST.map((tab) => (
+          <Link key={tab.key} href={`/${workspaceSlug}/workspace-views/${tab.key}`}>
+            <a
+              className={`border-b-2 min-w-min p-3 text-sm font-medium outline-none whitespace-nowrap flex-shrink-0 ${
+                isTabSelected(tab.key)
+                  ? "border-custom-primary-100 text-custom-primary-100"
+                  : "border-transparent hover:border-custom-border-200 hover:text-custom-text-400"
+              }`}
+            >
+              {tab.label}
+            </a>
+          </Link>
+        ))}
+
+        {globalViewsStore.globalViewsList?.map((view) => (
+          <Link key={view.id} href={`/${workspaceSlug}/workspace-views/${view.id}`}>
+            <a
+              id={`global-view-${view.id}`}
+              className={`border-b-2 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"
+              }`}
+            >
+              {view.name}
+            </a>
+          </Link>
+        ))}
+
+        <button
+          type="button"
+          className="flex items-center justify-center flex-shrink-0 sticky -right-4 w-12 py-3 border-transparent bg-custom-background-100 hover:border-custom-border-200 hover:text-custom-text-400"
+          onClick={() => setCreateViewModal(true)}
+        >
+          <PlusIcon className="h-4 w-4 text-custom-primary-200" />
+        </button>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/workspace/views/index.ts b/web/components/workspace/views/index.ts
new file mode 100644
index 000000000..7d0547f64
--- /dev/null
+++ b/web/components/workspace/views/index.ts
@@ -0,0 +1,7 @@
+export * from "./default-view-list-item";
+export * from "./delete-view-modal";
+export * from "./form";
+export * from "./header";
+export * from "./modal";
+export * from "./view-list-item";
+export * from "./views-list";
diff --git a/web/components/workspace/views/modal.tsx b/web/components/workspace/views/modal.tsx
index f0f027468..37027ad1f 100644
--- a/web/components/workspace/views/modal.tsx
+++ b/web/components/workspace/views/modal.tsx
@@ -1,116 +1,103 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// headless ui
+import { observer } from "mobx-react-lite";
 import { Dialog, Transition } from "@headlessui/react";
-// services
-import workspaceService from "services/workspace.service";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // hooks
 import useToast from "hooks/use-toast";
 // components
-import { WorkspaceViewForm } from "components/workspace/views/form";
+import { WorkspaceViewForm } from "components/workspace";
 // types
 import { IWorkspaceView } from "types/workspace-views";
-// fetch-keys
-import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
 
 type Props = {
+  data?: IWorkspaceView;
   isOpen: boolean;
-  handleClose: () => void;
-  data?: IWorkspaceView | null;
-  preLoadedData?: Partial<IWorkspaceView> | null;
+  onClose: () => void;
+  preLoadedData?: Partial<IWorkspaceView>;
 };
 
-export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
-  isOpen,
-  handleClose,
-  data,
-  preLoadedData,
-}) => {
+export const CreateUpdateWorkspaceViewModal: React.FC<Props> = observer((props) => {
+  const { isOpen, onClose, data, preLoadedData } = props;
+
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { globalViews: globalViewsStore } = useMobxStore();
+
   const { setToastAlert } = useToast();
 
-  const onClose = () => {
-    handleClose();
+  const handleClose = () => {
+    onClose();
   };
 
-  const createView = async (payload: any) => {
-    const payloadData = {
+  const createView = async (payload: Partial<IWorkspaceView>) => {
+    if (!workspaceSlug) return;
+
+    const payloadData: Partial<IWorkspaceView> = {
       ...payload,
-      query_data: {
-        filters: payload.query,
+      query: {
+        ...payload.query_data?.filters,
       },
     };
-    await workspaceService
-      .createView(workspaceSlug as string, payloadData)
+
+    await globalViewsStore
+      .createGlobalView(workspaceSlug.toString(), payloadData)
       .then((res) => {
-        mutate(WORKSPACE_VIEWS_LIST(workspaceSlug as string));
-        handleClose();
-
-        router.replace(`/${workspaceSlug}/workspace-views/issues?globalViewId=${res.id}`);
-
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "View created successfully.",
         });
+
+        router.push(`/${workspaceSlug}/workspace-views/${res.id}`);
       })
-      .catch(() => {
+      .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "View could not be created. Please try again.",
-        });
-      });
+        })
+      );
   };
 
-  const updateView = async (payload: any) => {
-    const payloadData = {
+  const updateView = async (payload: Partial<IWorkspaceView>) => {
+    if (!workspaceSlug || !data) return;
+
+    const payloadData: Partial<IWorkspaceView> = {
       ...payload,
-      query_data: {
-        filters: payload.query,
+      query: {
+        ...payload.query_data?.filters,
       },
     };
-    await workspaceService
-      .updateView(workspaceSlug as string, data?.id ?? "", payloadData)
-      .then((res) => {
-        mutate<IWorkspaceView[]>(
-          WORKSPACE_VIEWS_LIST(workspaceSlug as string),
-          (prevData) =>
-            prevData?.map((p) => {
-              if (p.id === res.id) return { ...p, ...payloadData };
-
-              return p;
-            }),
-          false
-        );
-        onClose();
 
+    await globalViewsStore
+      .updateGlobalView(workspaceSlug.toString(), data.id, payloadData)
+      .then(() =>
         setToastAlert({
           type: "success",
           title: "Success!",
           message: "View updated successfully.",
-        });
-      })
-      .catch(() => {
+        })
+      )
+      .catch(() =>
         setToastAlert({
           type: "error",
           title: "Error!",
           message: "View could not be updated. Please try again.",
-        });
-      });
+        })
+      );
   };
 
-  const handleFormSubmit = async (formData: any) => {
+  const handleFormSubmit = async (formData: Partial<IWorkspaceView>) => {
     if (!workspaceSlug) return;
 
     if (!data) await createView(formData);
     else await updateView(formData);
+
+    handleClose();
   };
 
   return (
@@ -143,7 +130,6 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
                 <WorkspaceViewForm
                   handleFormSubmit={handleFormSubmit}
                   handleClose={handleClose}
-                  status={data ? true : false}
                   data={data}
                   preLoadedData={preLoadedData}
                 />
@@ -154,4 +140,4 @@ export const CreateUpdateWorkspaceViewModal: React.FC<Props> = ({
       </Dialog>
     </Transition.Root>
   );
-};
+});
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 fd153bdfc..000000000
--- 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/view-list-item.tsx b/web/components/workspace/views/view-list-item.tsx
new file mode 100644
index 000000000..b603ed2cd
--- /dev/null
+++ b/web/components/workspace/views/view-list-item.tsx
@@ -0,0 +1,87 @@
+import { useRouter } from "next/router";
+import Link from "next/link";
+import { observer } from "mobx-react-lite";
+import { useState } from "react";
+
+// components
+import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace";
+// ui
+import { CustomMenu } from "components/ui";
+// icons
+import { PencilIcon, Sparkles, TrashIcon } from "lucide-react";
+// helpers
+import { truncateText } from "helpers/string.helper";
+import { calculateTotalFilters } from "helpers/filter.helper";
+// types
+import { IWorkspaceView } from "types/workspace-views";
+
+type Props = { view: IWorkspaceView };
+
+export const GlobalViewListItem: React.FC<Props> = observer((props) => {
+  const { view } = props;
+
+  const [updateViewModal, setUpdateViewModal] = useState(false);
+  const [deleteViewModal, setDeleteViewModal] = useState(false);
+
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const totalFilters = calculateTotalFilters(view.query_data.filters ?? {});
+
+  return (
+    <>
+      <CreateUpdateWorkspaceViewModal data={view} isOpen={updateViewModal} onClose={() => setUpdateViewModal(false)} />
+      <DeleteGlobalViewModal data={view} isOpen={deleteViewModal} onClose={() => setDeleteViewModal(false)} />
+      <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
+        <Link href={`/${workspaceSlug}/workspace-views/${view.id}`}>
+          <a className="flex items-center justify-between relative rounded p-4 w-full">
+            <div className="flex items-center justify-between w-full">
+              <div className="flex items-center gap-4">
+                <div className="grid place-items-center h-10 w-10 rounded bg-custom-background-90 group-hover:bg-custom-background-100">
+                  <Sparkles size={14} strokeWidth={2} />
+                </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 hidden group-hover:block">
+                    {totalFilters} {totalFilters === 1 ? "filter" : "filters"}
+                  </p>
+                  <CustomMenu width="auto" ellipsis>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setUpdateViewModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <PencilIcon size={14} strokeWidth={2} />
+                        <span>Edit View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                    <CustomMenu.MenuItem
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        setDeleteViewModal(true);
+                      }}
+                    >
+                      <span className="flex items-center justify-start gap-2">
+                        <TrashIcon size={14} strokeWidth={2} />
+                        <span>Delete View</span>
+                      </span>
+                    </CustomMenu.MenuItem>
+                  </CustomMenu>
+                </div>
+              </div>
+            </div>
+          </a>
+        </Link>
+      </div>
+    </>
+  );
+});
diff --git a/web/components/workspace/views/views-list.tsx b/web/components/workspace/views/views-list.tsx
new file mode 100644
index 000000000..98b186a16
--- /dev/null
+++ b/web/components/workspace/views/views-list.tsx
@@ -0,0 +1,50 @@
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// components
+import { GlobalViewListItem } from "components/workspace";
+// ui
+import { Loader } from "@plane/ui";
+
+type Props = {
+  searchQuery: string;
+};
+
+export const GlobalViewsList: React.FC<Props> = observer((props) => {
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+
+  const { searchQuery } = props;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug ? `GLOBAL_VIEWS_LIST_${workspaceSlug.toString()}` : null,
+    workspaceSlug ? () => globalViewsStore.fetchAllGlobalViews(workspaceSlug.toString()) : null
+  );
+
+  const viewsList = globalViewsStore.globalViewsList;
+
+  if (!viewsList)
+    return (
+      <Loader className="space-y-4 p-4">
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+        <Loader.Item height="72px" />
+      </Loader>
+    );
+
+  const filteredViewsList = viewsList.filter((v) => v.name.toLowerCase().includes(searchQuery.toLowerCase()));
+
+  return (
+    <>
+      {filteredViewsList.map((view) => (
+        <GlobalViewListItem key={view.id} view={view} />
+      ))}
+    </>
+  );
+});
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 867764a5d..000000000
--- 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/constants/analytics.ts b/web/constants/analytics.ts
index 709b5938a..8bf3f08cc 100644
--- a/web/constants/analytics.ts
+++ b/web/constants/analytics.ts
@@ -1,9 +1,14 @@
 // types
 import { TXAxisValues, TYAxisValues } from "types";
 
+export const ANALYTICS_TABS = [
+  { key: "scope_and_demand", title: "Scope and Demand" },
+  { key: "custom", title: "Custom Analytics" },
+];
+
 export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] = [
   {
-    value: "state__name",
+    value: "state_id",
     label: "State name",
   },
   {
@@ -15,7 +20,7 @@ export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] =
     label: "Priority",
   },
   {
-    value: "labels__name",
+    value: "labels__id",
     label: "Label",
   },
   {
@@ -27,11 +32,11 @@ export const ANALYTICS_X_AXIS_VALUES: { value: TXAxisValues; label: string }[] =
     label: "Estimate point",
   },
   {
-    value: "issue_cycle__cycle__name",
+    value: "issue_cycle__cycle_id",
     label: "Cycle",
   },
   {
-    value: "issue_module__module__name",
+    value: "issue_module__module_id",
     label: "Module",
   },
   {
diff --git a/web/constants/calendar.ts b/web/constants/calendar.ts
index 5f1f74254..4c4070ec1 100644
--- a/web/constants/calendar.ts
+++ b/web/constants/calendar.ts
@@ -1,22 +1,109 @@
-export const MONTHS_LIST = [
-  { value: 1, label: "January" },
-  { value: 2, label: "February" },
-  { value: 3, label: "March" },
-  { value: 4, label: "April" },
-  { value: 5, label: "May" },
-  { value: 6, label: "June" },
-  { value: 7, label: "July" },
-  { value: 8, label: "August" },
-  { value: 9, label: "September" },
-  { value: 10, label: "October" },
-  { value: 11, label: "November" },
-  { value: 12, label: "December" },
-];
+import { TCalendarLayouts } from "types";
 
-export const YEARS_LIST = [
-  { value: "2021", label: "2021" },
-  { value: "2022", label: "2022" },
-  { value: "2023", label: "2023" },
-  { value: "2024", label: "2024" },
-  { value: "2025", label: "2025" },
-];
+export const MONTHS_LIST: {
+  [monthNumber: number]: {
+    shortTitle: string;
+    title: string;
+  };
+} = {
+  1: {
+    shortTitle: "Jan",
+    title: "January",
+  },
+  2: {
+    shortTitle: "Feb",
+    title: "February",
+  },
+  3: {
+    shortTitle: "Mar",
+    title: "March",
+  },
+  4: {
+    shortTitle: "Apr",
+    title: "April",
+  },
+  5: {
+    shortTitle: "May",
+    title: "May",
+  },
+  6: {
+    shortTitle: "Jun",
+    title: "June",
+  },
+  7: {
+    shortTitle: "Jul",
+    title: "July",
+  },
+  8: {
+    shortTitle: "Aug",
+    title: "August",
+  },
+  9: {
+    shortTitle: "Sep",
+    title: "September",
+  },
+  10: {
+    shortTitle: "Oct",
+    title: "October",
+  },
+  11: {
+    shortTitle: "Nov",
+    title: "November",
+  },
+  12: {
+    shortTitle: "Dec",
+    title: "December",
+  },
+};
+
+export const DAYS_LIST: {
+  [dayIndex: number]: {
+    shortTitle: string;
+    title: string;
+  };
+} = {
+  1: {
+    shortTitle: "Sun",
+    title: "Sunday",
+  },
+  2: {
+    shortTitle: "Mon",
+    title: "Monday",
+  },
+  3: {
+    shortTitle: "Tue",
+    title: "Tuesday",
+  },
+  4: {
+    shortTitle: "Wed",
+    title: "Wednesday",
+  },
+  5: {
+    shortTitle: "Thu",
+    title: "Thursday",
+  },
+  6: {
+    shortTitle: "Fri",
+    title: "Friday",
+  },
+  7: {
+    shortTitle: "Sat",
+    title: "Saturday",
+  },
+};
+
+export const CALENDAR_LAYOUTS: {
+  [layout in TCalendarLayouts]: {
+    key: TCalendarLayouts;
+    title: string;
+  };
+} = {
+  month: {
+    key: "month",
+    title: "Month layout",
+  },
+  week: {
+    key: "week",
+    title: "Week layout",
+  },
+};
diff --git a/web/constants/cycle.ts b/web/constants/cycle.ts
new file mode 100644
index 000000000..f4d805858
--- /dev/null
+++ b/web/constants/cycle.ts
@@ -0,0 +1,37 @@
+export const CYCLE_TAB_LIST = [
+  {
+    key: "all",
+    name: "All",
+  },
+  {
+    key: "active",
+    name: "Active",
+  },
+  {
+    key: "upcoming",
+    name: "Upcoming",
+  },
+  {
+    key: "completed",
+    name: "Completed",
+  },
+  {
+    key: "draft",
+    name: "Drafts",
+  },
+];
+
+export const CYCLE_VIEWS = [
+  {
+    key: "list",
+    icon: "list",
+  },
+  {
+    key: "board",
+    icon: "dataset",
+  },
+  {
+    key: "gantt",
+    icon: "view_timeline",
+  },
+];
diff --git a/web/constants/fetch-keys.ts b/web/constants/fetch-keys.ts
index 431b6aafc..e5b22fb95 100644
--- a/web/constants/fetch-keys.ts
+++ b/web/constants/fetch-keys.ts
@@ -61,16 +61,7 @@ const inboxParamsToKey = (params: any) => {
 };
 
 const myIssuesParamsToKey = (params: any) => {
-  const {
-    assignees,
-    created_by,
-    labels,
-    priority,
-    state_group,
-    subscriber,
-    start_date,
-    target_date,
-  } = params;
+  const { assignees, created_by, labels, priority, state_group, subscriber, start_date, target_date } = params;
 
   let assigneesKey = assignees ? assignees.split(",") : [];
   let createdByKey = created_by ? created_by.split(",") : [];
@@ -99,15 +90,12 @@ export const CURRENT_USER = "CURRENT_USER";
 export const USER_WORKSPACE_INVITATIONS = "USER_WORKSPACE_INVITATIONS";
 export const USER_WORKSPACES = "USER_WORKSPACES";
 
-export const WORKSPACE_DETAILS = (workspaceSlug: string) =>
-  `WORKSPACE_DETAILS_${workspaceSlug.toUpperCase()}`;
+export const WORKSPACE_DETAILS = (workspaceSlug: string) => `WORKSPACE_DETAILS_${workspaceSlug.toUpperCase()}`;
 
-export const WORKSPACE_MEMBERS = (workspaceSlug: string) =>
-  `WORKSPACE_MEMBERS_${workspaceSlug.toUpperCase()}`;
+export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug.toUpperCase()}`;
 export const WORKSPACE_MEMBERS_WITH_EMAIL = (workspaceSlug: string) =>
   `WORKSPACE_MEMBERS_WITH_EMAIL_${workspaceSlug.toUpperCase()}`;
-export const WORKSPACE_MEMBERS_ME = (workspaceSlug: string) =>
-  `WORKSPACE_MEMBERS_ME${workspaceSlug.toUpperCase()}`;
+export const WORKSPACE_MEMBERS_ME = (workspaceSlug: string) => `WORKSPACE_MEMBERS_ME${workspaceSlug.toUpperCase()}`;
 export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS";
 export const WORKSPACE_INVITATION_WITH_EMAIL = (workspaceSlug: string) =>
   `WORKSPACE_INVITATION_WITH_EMAIL_${workspaceSlug.toUpperCase()}`;
@@ -122,9 +110,7 @@ export const PROJECTS_LIST = (
 ) => {
   if (!params) return `PROJECTS_LIST_${workspaceSlug.toUpperCase()}`;
 
-  return `PROJECTS_LIST_${workspaceSlug.toUpperCase()}_${params.is_favorite
-    .toString()
-    .toUpperCase()}`;
+  return `PROJECTS_LIST_${workspaceSlug.toUpperCase()}_${params.is_favorite.toString().toUpperCase()}`;
 };
 export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId.toUpperCase()}`;
 
@@ -160,44 +146,26 @@ export const PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS = (projectId: string, params?
   return `PROJECT_DRAFT_ISSUES_LIST_WITH_PARAMS${projectId.toUpperCase()}_${paramsKey}`;
 };
 
-export const WORKSPACE_VIEWS_LIST = (workspaceSlug: string) =>
-  `WORKSPACE_VIEWS_LIST_${workspaceSlug.toUpperCase()}`;
-export const WORKSPACE_VIEW_DETAILS = (globalViewId: string) =>
-  `WORKSPACE_VIEW_DETAILS_${globalViewId.toUpperCase()}`;
-export const WORKSPACE_VIEW_ISSUES = (globalViewId: string, params: any) => {
-  if (!params) return `WORKSPACE_VIEW_ISSUES_${globalViewId.toUpperCase()}`;
-  return `WORKSPACE_VIEW_ISSUES_${globalViewId.toUpperCase()}_${paramsToKey(params).toUpperCase()}`;
-};
+export const GLOBAL_VIEWS_LIST = (workspaceSlug: string) => `GLOBAL_VIEWS_LIST_${workspaceSlug.toUpperCase()}`;
+export const GLOBAL_VIEW_DETAILS = (globalViewId: string) => `GLOBAL_VIEW_DETAILS_${globalViewId.toUpperCase()}`;
+export const GLOBAL_VIEW_ISSUES = (globalViewId: string) => `GLOBAL_VIEW_ISSUES_${globalViewId.toUpperCase()}`;
 
-export const PROJECT_ISSUES_DETAILS = (issueId: string) =>
-  `PROJECT_ISSUES_DETAILS_${issueId.toUpperCase()}`;
-export const PROJECT_ISSUES_PROPERTIES = (projectId: string) =>
-  `PROJECT_ISSUES_PROPERTIES_${projectId.toUpperCase()}`;
-export const PROJECT_ISSUES_COMMENTS = (issueId: string) =>
-  `PROJECT_ISSUES_COMMENTS_${issueId.toUpperCase()}`;
-export const PROJECT_ISSUES_ACTIVITY = (issueId: string) =>
-  `PROJECT_ISSUES_ACTIVITY_${issueId.toUpperCase()}`;
-export const PROJECT_ISSUE_BY_STATE = (projectId: string) =>
-  `PROJECT_ISSUE_BY_STATE_${projectId.toUpperCase()}`;
-export const PROJECT_ISSUE_LABELS = (projectId: string) =>
-  `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}`;
-export const WORKSPACE_LABELS = (workspaceSlug: string) =>
-  `WORKSPACE_LABELS_${workspaceSlug.toUpperCase()}`;
-export const PROJECT_GITHUB_REPOSITORY = (projectId: string) =>
-  `PROJECT_GITHUB_REPOSITORY_${projectId.toUpperCase()}`;
+export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAILS_${issueId.toUpperCase()}`;
+export const PROJECT_ISSUES_PROPERTIES = (projectId: string) => `PROJECT_ISSUES_PROPERTIES_${projectId.toUpperCase()}`;
+export const PROJECT_ISSUES_COMMENTS = (issueId: string) => `PROJECT_ISSUES_COMMENTS_${issueId.toUpperCase()}`;
+export const PROJECT_ISSUES_ACTIVITY = (issueId: string) => `PROJECT_ISSUES_ACTIVITY_${issueId.toUpperCase()}`;
+export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId.toUpperCase()}`;
+export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId.toUpperCase()}`;
+export const WORKSPACE_LABELS = (workspaceSlug: string) => `WORKSPACE_LABELS_${workspaceSlug.toUpperCase()}`;
+export const PROJECT_GITHUB_REPOSITORY = (projectId: string) => `PROJECT_GITHUB_REPOSITORY_${projectId.toUpperCase()}`;
 
 // cycles
 export const CYCLES_LIST = (projectId: string) => `CYCLE_LIST_${projectId.toUpperCase()}`;
-export const INCOMPLETE_CYCLES_LIST = (projectId: string) =>
-  `INCOMPLETE_CYCLES_LIST_${projectId.toUpperCase()}`;
-export const CURRENT_CYCLE_LIST = (projectId: string) =>
-  `CURRENT_CYCLE_LIST_${projectId.toUpperCase()}`;
-export const UPCOMING_CYCLES_LIST = (projectId: string) =>
-  `UPCOMING_CYCLES_LIST_${projectId.toUpperCase()}`;
-export const DRAFT_CYCLES_LIST = (projectId: string) =>
-  `DRAFT_CYCLES_LIST_${projectId.toUpperCase()}`;
-export const COMPLETED_CYCLES_LIST = (projectId: string) =>
-  `COMPLETED_CYCLES_LIST_${projectId.toUpperCase()}`;
+export const INCOMPLETE_CYCLES_LIST = (projectId: string) => `INCOMPLETE_CYCLES_LIST_${projectId.toUpperCase()}`;
+export const CURRENT_CYCLE_LIST = (projectId: string) => `CURRENT_CYCLE_LIST_${projectId.toUpperCase()}`;
+export const UPCOMING_CYCLES_LIST = (projectId: string) => `UPCOMING_CYCLES_LIST_${projectId.toUpperCase()}`;
+export const DRAFT_CYCLES_LIST = (projectId: string) => `DRAFT_CYCLES_LIST_${projectId.toUpperCase()}`;
+export const COMPLETED_CYCLES_LIST = (projectId: string) => `COMPLETED_CYCLES_LIST_${projectId.toUpperCase()}`;
 export const CYCLE_ISSUES = (cycleId: string) => `CYCLE_ISSUES_${cycleId.toUpperCase()}`;
 export const CYCLE_ISSUES_WITH_PARAMS = (cycleId: string, params?: any) => {
   if (!params) return `CYCLE_ISSUES_WITH_PARAMS_${cycleId.toUpperCase()}`;
@@ -219,8 +187,7 @@ export const USER_ISSUES = (workspaceSlug: string, params: any) => {
 export const USER_ACTIVITY = "USER_ACTIVITY";
 export const USER_WORKSPACE_DASHBOARD = (workspaceSlug: string) =>
   `USER_WORKSPACE_DASHBOARD_${workspaceSlug.toUpperCase()}`;
-export const USER_PROJECT_VIEW = (projectId: string) =>
-  `USER_PROJECT_VIEW_${projectId.toUpperCase()}`;
+export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId.toUpperCase()}`;
 
 export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId.toUpperCase()}`;
 export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId.toUpperCase()}`;
@@ -260,8 +227,7 @@ export const INBOX_ISSUE_DETAILS = (inboxId: string, issueId: string) =>
 export const ISSUE_DETAILS = (issueId: string) => `ISSUE_DETAILS_${issueId.toUpperCase()}`;
 export const SUB_ISSUES = (issueId: string) => `SUB_ISSUES_${issueId.toUpperCase()}`;
 export const ISSUE_ATTACHMENTS = (issueId: string) => `ISSUE_ATTACHMENTS_${issueId.toUpperCase()}`;
-export const ARCHIVED_ISSUE_DETAILS = (issueId: string) =>
-  `ARCHIVED_ISSUE_DETAILS_${issueId.toUpperCase()}`;
+export const ARCHIVED_ISSUE_DETAILS = (issueId: string) => `ARCHIVED_ISSUE_DETAILS_${issueId.toUpperCase()}`;
 
 // integrations
 export const APP_INTEGRATIONS = "APP_INTEGRATIONS";
@@ -291,22 +257,18 @@ export const SLACK_CHANNEL_INFO = (workspaceSlug: string, projectId: string) =>
   `SLACK_CHANNEL_INFO_${workspaceSlug.toString().toUpperCase()}_${projectId.toUpperCase()}`;
 
 // Pages
-export const RECENT_PAGES_LIST = (projectId: string) =>
-  `RECENT_PAGES_LIST_${projectId.toUpperCase()}`;
+export const RECENT_PAGES_LIST = (projectId: string) => `RECENT_PAGES_LIST_${projectId.toUpperCase()}`;
 export const ALL_PAGES_LIST = (projectId: string) => `ALL_PAGES_LIST_${projectId.toUpperCase()}`;
-export const FAVORITE_PAGES_LIST = (projectId: string) =>
-  `FAVORITE_PAGES_LIST_${projectId.toUpperCase()}`;
+export const FAVORITE_PAGES_LIST = (projectId: string) => `FAVORITE_PAGES_LIST_${projectId.toUpperCase()}`;
 export const MY_PAGES_LIST = (projectId: string) => `MY_PAGES_LIST_${projectId.toUpperCase()}`;
-export const OTHER_PAGES_LIST = (projectId: string) =>
-  `OTHER_PAGES_LIST_${projectId.toUpperCase()}`;
+export const OTHER_PAGES_LIST = (projectId: string) => `OTHER_PAGES_LIST_${projectId.toUpperCase()}`;
 export const PAGE_DETAILS = (pageId: string) => `PAGE_DETAILS_${pageId.toUpperCase()}`;
 export const PAGE_BLOCKS_LIST = (pageId: string) => `PAGE_BLOCK_LIST_${pageId.toUpperCase()}`;
 export const PAGE_BLOCK_DETAILS = (pageId: string) => `PAGE_BLOCK_DETAILS_${pageId.toUpperCase()}`;
 
 // estimates
 export const ESTIMATES_LIST = (projectId: string) => `ESTIMATES_LIST_${projectId.toUpperCase()}`;
-export const ESTIMATE_DETAILS = (estimateId: string) =>
-  `ESTIMATE_DETAILS_${estimateId.toUpperCase()}`;
+export const ESTIMATE_DETAILS = (estimateId: string) => `ESTIMATE_DETAILS_${estimateId.toUpperCase()}`;
 
 // analytics
 export const ANALYTICS = (workspaceSlug: string, params: IAnalyticsParams) =>
@@ -314,15 +276,10 @@ export const ANALYTICS = (workspaceSlug: string, params: IAnalyticsParams) =>
     params.segment
   }_${params.project?.toString()}`;
 export const DEFAULT_ANALYTICS = (workspaceSlug: string, params?: Partial<IAnalyticsParams>) =>
-  `DEFAULT_ANALYTICS_${workspaceSlug.toUpperCase()}_${params?.project?.toString()}_${
-    params?.cycle
-  }_${params?.module}`;
+  `DEFAULT_ANALYTICS_${workspaceSlug.toUpperCase()}_${params?.project?.toString()}_${params?.cycle}_${params?.module}`;
 
 // notifications
-export const USER_WORKSPACE_NOTIFICATIONS = (
-  workspaceSlug: string,
-  params: INotificationParams
-) => {
+export const USER_WORKSPACE_NOTIFICATIONS = (workspaceSlug: string, params: INotificationParams) => {
   const { type, snoozed, archived, read } = params;
 
   return `USER_WORKSPACE_NOTIFICATIONS_${workspaceSlug?.toUpperCase()}_TYPE_${(
@@ -330,21 +287,13 @@ export const USER_WORKSPACE_NOTIFICATIONS = (
   )?.toUpperCase()}_SNOOZED_${snoozed}_ARCHIVED_${archived}_READ_${read}`;
 };
 
-export const USER_WORKSPACE_NOTIFICATIONS_DETAILS = (
-  workspaceSlug: string,
-  notificationId: string
-) =>
+export const USER_WORKSPACE_NOTIFICATIONS_DETAILS = (workspaceSlug: string, notificationId: string) =>
   `USER_WORKSPACE_NOTIFICATIONS_DETAILS_${workspaceSlug?.toUpperCase()}_${notificationId?.toUpperCase()}`;
 
 export const UNREAD_NOTIFICATIONS_COUNT = (workspaceSlug: string) =>
   `UNREAD_NOTIFICATIONS_COUNT_${workspaceSlug?.toUpperCase()}`;
 
-export const getPaginatedNotificationKey = (
-  index: number,
-  prevData: any,
-  workspaceSlug: string,
-  params: any
-) => {
+export const getPaginatedNotificationKey = (index: number, prevData: any, workspaceSlug: string, params: any) => {
   if (prevData && !prevData?.results?.length) return null;
 
   if (index === 0)
@@ -380,9 +329,5 @@ export const USER_PROFILE_ISSUES = (workspaceSlug: string, userId: string, param
 // reactions
 export const ISSUE_REACTION_LIST = (workspaceSlug: string, projectId: string, issueId: string) =>
   `ISSUE_REACTION_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}_${issueId.toUpperCase()}`;
-export const COMMENT_REACTION_LIST = (
-  workspaceSlug: string,
-  projectId: string,
-  commendId: string
-) =>
+export const COMMENT_REACTION_LIST = (workspaceSlug: string, projectId: string, commendId: string) =>
   `COMMENT_REACTION_LIST_${workspaceSlug.toUpperCase()}_${projectId.toUpperCase()}_${commendId.toUpperCase()}`;
diff --git a/web/constants/filters.ts b/web/constants/filters.ts
index 1172ae47b..e4131e451 100644
--- a/web/constants/filters.ts
+++ b/web/constants/filters.ts
@@ -1,37 +1,18 @@
-// helper
-import { renderDateFormat } from "helpers/date-time.helper";
-
 export const DATE_FILTER_OPTIONS = [
   {
-    name: "Last week",
-    value: [
-      `${renderDateFormat(new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000))};after`,
-      `${renderDateFormat(new Date())};before`,
-    ],
+    name: "1 week from now",
+    value: "1_weeks;after;fromnow",
   },
   {
     name: "2 weeks from now",
-    value: [
-      `${renderDateFormat(new Date())};after`,
-      `${renderDateFormat(new Date(new Date().getTime() + 14 * 24 * 60 * 60 * 1000))};before`,
-    ],
+    value: "2_weeks;after;fromnow",
   },
   {
     name: "1 month from now",
-    value: [
-      `${renderDateFormat(new Date())};after`,
-      `${renderDateFormat(
-        new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate())
-      )};before`,
-    ],
+    value: "1_months;after;fromnow",
   },
   {
     name: "2 months from now",
-    value: [
-      `${renderDateFormat(new Date())};after`,
-      `${renderDateFormat(
-        new Date(new Date().getFullYear(), new Date().getMonth() + 2, new Date().getDate())
-      )};before`,
-    ],
+    value: "2_months;after;fromnow",
   },
 ];
diff --git a/web/constants/issue.ts b/web/constants/issue.ts
index ff9317070..246fc20f5 100644
--- a/web/constants/issue.ts
+++ b/web/constants/issue.ts
@@ -1,121 +1,311 @@
-export const GROUP_BY_OPTIONS: Array<{
-  name: string;
+// icons
+import { Calendar, GanttChart, Kanban, List, Sheet } from "lucide-react";
+// types
+import {
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  TIssueExtraOptions,
+  TIssueGroupByOptions,
+  TIssueLayouts,
+  TIssueOrderByOptions,
+  TIssuePriorities,
+  TIssueTypeFilters,
+  TStateGroups,
+} from "types";
+
+export const ISSUE_PRIORITIES: {
+  key: TIssuePriorities;
+  title: string;
+}[] = [
+  { key: "urgent", title: "Urgent" },
+  { key: "high", title: "High" },
+  { key: "medium", title: "Medium" },
+  { key: "low", title: "Low" },
+  { key: "none", title: "None" },
+];
+
+export const issuePriorityByKey = (key: string) => ISSUE_PRIORITIES.find((item) => item.key === key) || null;
+
+export const ISSUE_STATE_GROUPS: {
+  key: TStateGroups;
+  title: string;
+}[] = [
+  { key: "backlog", title: "Backlog" },
+  { key: "unstarted", title: "Unstarted" },
+  { key: "started", title: "Started" },
+  { key: "completed", title: "Completed" },
+  { key: "cancelled", title: "Cancelled" },
+];
+
+export const issueStateGroupByKey = (key: string) => ISSUE_STATE_GROUPS.find((item) => item.key === key) || null;
+
+export const ISSUE_START_DATE_OPTIONS = [
+  { key: "last_week", title: "Last Week" },
+  { key: "2_weeks_from_now", title: "2 weeks from now" },
+  { key: "1_month_from_now", title: "1 month from now" },
+  { key: "2_months_from_now", title: "2 months from now" },
+  { key: "custom", title: "Custom" },
+];
+
+export const ISSUE_DUE_DATE_OPTIONS = [
+  { key: "last_week", title: "Last Week" },
+  { key: "2_weeks_from_now", title: "2 weeks from now" },
+  { key: "1_month_from_now", title: "1 month from now" },
+  { key: "2_months_from_now", title: "2 months from now" },
+  { key: "custom", title: "Custom" },
+];
+
+export const ISSUE_GROUP_BY_OPTIONS: {
   key: TIssueGroupByOptions;
-}> = [
-  { name: "States", key: "state" },
-  { name: "State Groups", key: "state_detail.group" },
-  { name: "Priority", key: "priority" },
-  { name: "Project", key: "project" },
-  { name: "Labels", key: "labels" },
-  { name: "Assignees", key: "assignees" },
-  { name: "Created by", key: "created_by" },
-  { name: "None", key: null },
+  title: string;
+}[] = [
+  { key: "state", title: "States" },
+  { key: "state_detail.group", title: "State Groups" },
+  { key: "priority", title: "Priority" },
+  { key: "project", title: "Project" }, // required this on my issues
+  { key: "labels", title: "Labels" },
+  { key: "assignees", title: "Assignees" },
+  { key: "created_by", title: "Created By" },
+  { key: null, title: "None" },
 ];
 
-export const ORDER_BY_OPTIONS: Array<{
-  name: string;
+export const ISSUE_ORDER_BY_OPTIONS: {
   key: TIssueOrderByOptions;
-}> = [
-  { name: "Manual", key: "sort_order" },
-  { name: "Last created", key: "-created_at" },
-  { name: "Last updated", key: "-updated_at" },
-  { name: "Start date", key: "start_date" },
-  { name: "Priority", key: "priority" },
+  title: string;
+}[] = [
+  { key: "sort_order", title: "Manual" },
+  { key: "-created_at", title: "Last Created" },
+  { key: "-updated_at", title: "Last Updated" },
+  { key: "start_date", title: "Start Date" },
+  { key: "target_date", title: "Due Date" },
+  { key: "priority", title: "Priority" },
 ];
 
-export const FILTER_ISSUE_OPTIONS: Array<{
-  name: string;
-  key: "active" | "backlog" | null;
-}> = [
-  {
-    name: "All",
-    key: null,
-  },
-  {
-    name: "Active Issues",
-    key: "active",
-  },
-  {
-    name: "Backlog Issues",
-    key: "backlog",
-  },
+export const ISSUE_FILTER_OPTIONS: {
+  key: TIssueTypeFilters;
+  title: string;
+}[] = [
+  { key: null, title: "All" },
+  { key: "active", title: "Active Issues" },
+  { key: "backlog", title: "Backlog Issues" },
+  // { key: "draft", title: "Draft Issues" },
 ];
 
-import { orderArrayBy } from "helpers/array.helper";
-import { IIssue, TIssueGroupByOptions, TIssueOrderByOptions } from "types";
+export const ISSUE_DISPLAY_PROPERTIES: {
+  key: keyof IIssueDisplayProperties;
+  title: string;
+}[] = [
+  { key: "assignee", title: "Assignee" },
+  { key: "start_date", title: "Start Date" },
+  { key: "due_date", title: "Due Date" },
+  { key: "key", title: "ID" },
+  { key: "labels", title: "Labels" },
+  { key: "priority", title: "Priority" },
+  { key: "state", title: "State" },
+  { key: "sub_issue_count", title: "Sub Issue Count" },
+  { key: "attachment_count", title: "Attachment Count" },
+  { key: "link", title: "Link" },
+  { key: "estimate", title: "Estimate" },
+];
 
-type THandleIssuesMutation = (
-  formData: Partial<IIssue>,
-  oldGroupTitle: string,
-  selectedGroupBy: TIssueGroupByOptions,
-  issueIndex: number,
-  orderBy: TIssueOrderByOptions,
-  prevData?:
-    | {
-        [key: string]: IIssue[];
-      }
-    | IIssue[]
-) =>
-  | {
-      [key: string]: IIssue[];
-    }
-  | IIssue[]
-  | undefined;
+export const ISSUE_EXTRA_OPTIONS: {
+  key: TIssueExtraOptions;
+  title: string;
+}[] = [
+  { key: "sub_issue", title: "Show sub-issues" }, // in spreadsheet its always false
+  { key: "show_empty_groups", title: "Show empty states" }, // filter on front-end
+];
 
-export const handleIssuesMutation: THandleIssuesMutation = (
-  formData,
-  oldGroupTitle,
-  selectedGroupBy,
-  issueIndex,
-  orderBy,
-  prevData
-) => {
-  if (!prevData) return prevData;
+export const ISSUE_LAYOUTS: {
+  key: TIssueLayouts;
+  title: string;
+  icon: any;
+}[] = [
+  { key: "list", title: "List Layout", icon: List },
+  { key: "kanban", title: "Kanban Layout", icon: Kanban },
+  { key: "calendar", title: "Calendar Layout", icon: Calendar },
+  { key: "spreadsheet", title: "Spreadsheet Layout", icon: Sheet },
+  { key: "gantt_chart", title: "Gantt Chart Layout", icon: GanttChart },
+];
 
-  if (Array.isArray(prevData)) {
-    const updatedIssue = {
-      ...prevData[issueIndex],
-      ...formData,
-      assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees,
-      labels: formData?.labels_list ?? prevData[issueIndex]?.labels,
-    };
+export const ISSUE_LIST_FILTERS = [
+  { key: "priority", title: "Priority" },
+  { key: "state", title: "State" },
+  { key: "assignees", title: "Assignees" },
+  { key: "created_by", title: "Created By" },
+  { key: "labels", title: "Labels" },
+  { key: "start_date", title: "Start Date" },
+  { key: "due_date", title: "Due Date" },
+];
 
-    prevData.splice(issueIndex, 1, updatedIssue);
+export const ISSUE_KANBAN_FILTERS = [
+  { key: "priority", title: "Priority" },
+  { key: "state", title: "State" },
+  { key: "assignees", title: "Assignees" },
+  { key: "created_by", title: "Created By" },
+  { key: "labels", title: "Labels" },
+  { key: "start_date", title: "Start Date" },
+  { key: "due_date", title: "Due Date" },
+];
 
-    return [...prevData];
-  } else {
-    const oldGroup = prevData[oldGroupTitle ?? ""] ?? [];
+export const ISSUE_CALENDER_FILTERS = [
+  { key: "priority", title: "Priority" },
+  { key: "state", title: "State" },
+  { key: "assignees", title: "Assignees" },
+  { key: "created_by", title: "Created By" },
+  { key: "labels", title: "Labels" },
+];
 
-    let newGroup: IIssue[] = [];
+export const ISSUE_SPREADSHEET_FILTERS = [
+  { key: "priority", title: "Priority" },
+  { key: "state", title: "State" },
+  { key: "assignees", title: "Assignees" },
+  { key: "created_by", title: "Created By" },
+  { key: "labels", title: "Labels" },
+  { key: "start_date", title: "Start Date" },
+  { key: "due_date", title: "Due Date" },
+];
 
-    if (selectedGroupBy === "priority") newGroup = prevData[formData.priority ?? ""] ?? [];
-    else if (selectedGroupBy === "state") newGroup = prevData[formData.state ?? ""] ?? [];
+export const ISSUE_GANTT_FILTERS = [
+  { key: "priority", title: "Priority" },
+  { key: "state", title: "State" },
+  { key: "assignees", title: "Assignees" },
+  { key: "created_by", title: "Created By" },
+  { key: "labels", title: "Labels" },
+  { key: "start_date", title: "Start Date" },
+  { key: "due_date", title: "Due Date" },
+];
 
-    const updatedIssue = {
-      ...oldGroup[issueIndex],
-      ...formData,
-      assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees,
-      labels: formData?.labels_list ?? oldGroup[issueIndex]?.labels,
-    };
+export const ISSUE_LIST_DISPLAY_FILTERS = [
+  { key: "group_by", title: "Group By" },
+  { key: "order_by", title: "Order By" },
+  { key: "issue_type", title: "Issue Type" },
+  { key: "sub_issue", title: "Sub Issue" },
+  { key: "show_empty_groups", title: "Show Empty Groups" },
+];
 
-    if (selectedGroupBy !== Object.keys(formData)[0])
-      return {
-        ...prevData,
-        [oldGroupTitle ?? ""]: orderArrayBy(
-          oldGroup.map((i) => (i.id === updatedIssue.id ? updatedIssue : i)),
-          orderBy
-        ),
-      };
+export const ISSUE_KANBAN_DISPLAY_FILTERS = [
+  { key: "group_by", title: "Group By" },
+  { key: "order_by", title: "Order By" },
+  { key: "issue_type", title: "Issue Type" },
+  { key: "sub_issue", title: "Sub Issue" },
+  { key: "show_empty_groups", title: "Show Empty Groups" },
+];
 
-    const groupThatIsUpdated = selectedGroupBy === "priority" ? formData.priority : formData.state;
+export const ISSUE_CALENDER_DISPLAY_FILTERS = [{ key: "issue_type", title: "Issue Type" }];
 
-    return {
-      ...prevData,
-      [oldGroupTitle ?? ""]: orderArrayBy(
-        oldGroup.filter((i) => i.id !== updatedIssue.id),
-        orderBy
-      ),
-      [groupThatIsUpdated ?? ""]: orderArrayBy([...newGroup, updatedIssue], orderBy),
-    };
-  }
+export const ISSUE_SPREADSHEET_DISPLAY_FILTERS = [{ key: "issue_type", title: "Issue Type" }];
+
+export const ISSUE_GANTT_DISPLAY_FILTERS = [
+  { key: "order_by", title: "Order By" },
+  { key: "issue_type", title: "Issue Type" },
+  { key: "sub_issue", title: "Sub Issue" },
+];
+
+export interface ILayoutDisplayFiltersOptions {
+  filters: (keyof IIssueFilterOptions)[];
+  display_properties: boolean;
+  display_filters: {
+    group_by?: TIssueGroupByOptions[];
+    sub_group_by?: TIssueGroupByOptions[];
+    order_by?: TIssueOrderByOptions[];
+    type?: TIssueTypeFilters[];
+  };
+  extra_options: {
+    access: boolean;
+    values: TIssueExtraOptions[];
+  };
+}
+
+export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
+  [pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
+} = {
+  my_issues: {
+    spreadsheet: {
+      filters: ["priority", "state_group", "labels", "assignees", "created_by", "project", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: false,
+        values: [],
+      },
+    },
+  },
+  issues: {
+    list: {
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state", "priority", "labels", "assignees", "created_by", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups", "sub_issue"],
+      },
+    },
+    kanban: {
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        group_by: ["state", "priority", "labels", "assignees", "created_by"],
+        sub_group_by: ["state", "priority", "labels", "assignees", "created_by", null],
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority", "target_date"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["show_empty_groups", "sub_issue"],
+      },
+    },
+    calendar: {
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date"],
+      display_properties: true,
+      display_filters: {
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["sub_issue"],
+      },
+    },
+    spreadsheet: {
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
+      display_properties: true,
+      display_filters: {
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: false,
+        values: [],
+      },
+    },
+    gantt_chart: {
+      filters: ["priority", "state", "assignees", "created_by", "labels", "start_date", "target_date"],
+      display_properties: false,
+      display_filters: {
+        order_by: ["sort_order", "-created_at", "-updated_at", "start_date", "priority"],
+        type: [null, "active", "backlog"],
+      },
+      extra_options: {
+        access: true,
+        values: ["sub_issue"],
+      },
+    },
+  },
+};
+
+export const getValueFromObject = (object: Object, key: string): string | number | boolean | null => {
+  const keys = key ? key.split(".") : [];
+
+  let value: any = object;
+  if (!value || keys.length === 0) return null;
+
+  for (const _key of keys) value = value[_key];
+  return value;
 };
diff --git a/web/constants/kanban-helpers.ts b/web/constants/kanban-helpers.ts
new file mode 100644
index 000000000..b6c4927e1
--- /dev/null
+++ b/web/constants/kanban-helpers.ts
@@ -0,0 +1,19 @@
+export const sortArrayByDate = (_array: any[], _key: string): any[] => {
+  console.log("date sorting");
+  // return _array.sort((a, b) => {
+  //   const x = new Date(a[_key]);
+  //   const y = new Date(b[_key]);
+  //   return x > y ? -1 : x < y ? 1 : 0;
+  // });
+  return _array;
+};
+
+export const sortArrayByPriority = (_array: any[], _key: string): any[] => {
+  console.log("priority sorting");
+  // return _array.sort((a, b) => {
+  //   const x = new Date(a[_key]);
+  //   const y = new Date(b[_key]);
+  //   return x > y ? -1 : x < y ? 1 : 0;
+  // });
+  return _array;
+};
diff --git a/web/constants/workspace.ts b/web/constants/workspace.ts
index 0683e39af..8f55fac4c 100644
--- a/web/constants/workspace.ts
+++ b/web/constants/workspace.ts
@@ -4,6 +4,7 @@ import JiraLogo from "public/services/jira.png";
 import CSVLogo from "public/services/csv.svg";
 import ExcelLogo from "public/services/excel.svg";
 import JSONLogo from "public/services/json.svg";
+import { TStaticViewTypes } from "types";
 
 export const ROLE = {
   5: "Guest",
@@ -67,3 +68,25 @@ export const EXPORTERS_LIST = [
     logo: JSONLogo,
   },
 ];
+
+export const DEFAULT_GLOBAL_VIEWS_LIST: {
+  key: TStaticViewTypes;
+  label: string;
+}[] = [
+  {
+    key: "all-issues",
+    label: "All issues",
+  },
+  {
+    key: "assigned",
+    label: "Assigned",
+  },
+  {
+    key: "created",
+    label: "Created",
+  },
+  {
+    key: "subscribed",
+    label: "Subscribed",
+  },
+];
diff --git a/web/contexts/inbox-view-context.tsx b/web/contexts/inbox-view-context.tsx
index b7b452f12..78e28b515 100644
--- a/web/contexts/inbox-view-context.tsx
+++ b/web/contexts/inbox-view-context.tsx
@@ -7,13 +7,14 @@ import useSWR from "swr";
 // components
 import ToastAlert from "components/toast-alert";
 // services
-import inboxServices from "services/inbox.service";
+import { InboxService } from "services/inbox.service";
 // types
 import { IInboxFilterOptions } from "types";
 // fetch-keys
 import { INBOX_DETAILS } from "constants/fetch-keys";
 
 export const inboxViewContext = createContext<ContextType>({} as ContextType);
+const inboxServices = new InboxService();
 
 type InboxViewProps = {
   filters: IInboxFilterOptions;
@@ -66,12 +67,7 @@ export const reducer: ReducerFunctionType = (state, action) => {
   }
 };
 
-const saveDataToServer = async (
-  workspaceSlug: string,
-  projectId: string,
-  inboxId: string,
-  state: any
-) => {
+const saveDataToServer = async (workspaceSlug: string, projectId: string, inboxId: string, state: any) => {
   await inboxServices.patchInbox(workspaceSlug, projectId, inboxId, {
     view_props: state,
   });
@@ -86,20 +82,14 @@ export const InboxViewContextProvider: React.FC<{ children: React.ReactNode }> =
   const { data: inboxDetails, mutate: mutateInboxDetails } = useSWR(
     workspaceSlug && projectId && inboxId ? INBOX_DETAILS(inboxId.toString()) : null,
     workspaceSlug && projectId && inboxId
-      ? () =>
-          inboxServices.getInboxById(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            inboxId.toString()
-          )
+      ? () => inboxServices.getInboxById(workspaceSlug.toString(), projectId.toString(), inboxId.toString())
       : null
   );
 
   const setFilters = useCallback(
     (property: Partial<IInboxFilterOptions>) => {
       Object.keys(property).forEach((key) => {
-        if (property[key as keyof typeof property]?.length === 0)
-          property[key as keyof typeof property] = null;
+        if (property[key as keyof typeof property]?.length === 0) property[key as keyof typeof property] = null;
       });
 
       dispatch({
@@ -131,12 +121,7 @@ export const InboxViewContextProvider: React.FC<{ children: React.ReactNode }> =
         };
       }, false);
 
-      saveDataToServer(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        inboxId.toString(),
-        newViewProps
-      );
+      saveDataToServer(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), newViewProps);
     },
     [workspaceSlug, projectId, inboxId, mutateInboxDetails, state]
   );
@@ -165,12 +150,7 @@ export const InboxViewContextProvider: React.FC<{ children: React.ReactNode }> =
       };
     }, false);
 
-    saveDataToServer(
-      workspaceSlug.toString(),
-      projectId.toString(),
-      inboxId.toString(),
-      newViewProps
-    );
+    saveDataToServer(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), newViewProps);
   }, [inboxId, mutateInboxDetails, projectId, state, workspaceSlug]);
 
   useEffect(() => {
diff --git a/web/contexts/issue-view.context.tsx b/web/contexts/issue-view.context.tsx
index 6e961cd1e..9b3a32b70 100644
--- a/web/contexts/issue-view.context.tsx
+++ b/web/contexts/issue-view.context.tsx
@@ -1,33 +1,24 @@
 import { createContext, useCallback, useEffect, useReducer } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
 // components
 import ToastAlert from "components/toast-alert";
 // services
-import projectService from "services/project.service";
-import cyclesService from "services/cycles.service";
-import modulesService from "services/modules.service";
-import viewsService from "services/views.service";
+import { ProjectService } from "services/project";
+import { CycleService } from "services/cycle.service";
+import { ModuleService } from "services/module.service";
+import { ViewService } from "services/view.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // types
-import {
-  IIssueFilterOptions,
-  IProjectMember,
-  ICurrentUserResponse,
-  IIssueDisplayFilterOptions,
-  IProjectViewProps,
-} from "types";
+import { IIssueFilterOptions, IProjectMember, IUser, IIssueDisplayFilterOptions, IProjectViewProps } from "types";
 // fetch-keys
-import {
-  CYCLE_DETAILS,
-  MODULE_DETAILS,
-  USER_PROJECT_VIEW,
-  VIEW_DETAILS,
-} from "constants/fetch-keys";
+import { CYCLE_DETAILS, MODULE_DETAILS, USER_PROJECT_VIEW, VIEW_DETAILS } from "constants/fetch-keys";
+
+const projectService = new ProjectService();
+const cycleService = new CycleService();
+const moduleService = new ModuleService();
+const viewService = new ViewService();
 
 export const issueViewContext = createContext<ContextType>({} as ContextType);
 
@@ -122,11 +113,7 @@ export const reducer: ReducerFunctionType = (state, action) => {
   }
 };
 
-const saveDataToServer = async (
-  workspaceSlug: string,
-  projectId: string,
-  state: IProjectViewProps
-) => {
+const saveDataToServer = async (workspaceSlug: string, projectId: string, state: IProjectViewProps) => {
   mutate<IProjectMember>(
     workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId as string) : null,
     (prevData) => {
@@ -150,9 +137,9 @@ const saveCycleFilters = async (
   projectId: string,
   cycleId: string,
   state: any,
-  user: ICurrentUserResponse | undefined
+  user: IUser | undefined
 ) => {
-  await cyclesService.patchCycle(
+  await cycleService.patchCycle(
     workspaceSlug,
     projectId,
     cycleId,
@@ -168,9 +155,9 @@ const saveModuleFilters = async (
   projectId: string,
   moduleId: string,
   state: any,
-  user: ICurrentUserResponse | undefined
+  user: IUser | undefined
 ) => {
-  await modulesService.patchModule(
+  await moduleService.patchModule(
     workspaceSlug,
     projectId,
     moduleId,
@@ -186,9 +173,9 @@ const saveViewFilters = async (
   projectId: string,
   viewId: string,
   state: any,
-  user: ICurrentUserResponse | undefined
+  user: IUser | undefined
 ) => {
-  await viewsService.patchView(
+  await viewService.patchView(
     workspaceSlug,
     projectId,
     viewId,
@@ -237,36 +224,21 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
   const { data: viewDetails, mutate: mutateViewDetails } = 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
   );
 
   const { data: cycleDetails, mutate: mutateCycleDetails } = useSWR(
     workspaceSlug && projectId && cycleId ? CYCLE_DETAILS(cycleId as string) : null,
     workspaceSlug && projectId && cycleId
-      ? () =>
-          cyclesService.getCycleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            cycleId.toString()
-          )
+      ? () => cycleService.getCycleDetails(workspaceSlug.toString(), projectId.toString(), cycleId.toString())
       : null
   );
 
   const { data: moduleDetails, mutate: mutateModuleDetails } = useSWR(
     workspaceSlug && projectId && moduleId ? MODULE_DETAILS(moduleId.toString()) : null,
     workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleDetails(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString()
-          )
+      ? () => moduleService.getModuleDetails(workspaceSlug.toString(), projectId.toString(), moduleId.toString())
       : null
   );
 
@@ -287,11 +259,7 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
         order_by: displayFilter.order_by ?? state.display_filters?.order_by,
       };
 
-      if (
-        displayFilter.layout &&
-        displayFilter.layout === "kanban" &&
-        state.display_filters?.group_by === null
-      ) {
+      if (displayFilter.layout && displayFilter.layout === "kanban" && state.display_filters?.group_by === null) {
         additionalProperties.group_by = "state";
         dispatch({
           type: "SET_DISPLAY_FILTERS",
@@ -342,8 +310,7 @@ export const IssueViewContextProvider: React.FC<{ children: React.ReactNode }> =
   const setFilters = useCallback(
     (property: Partial<IIssueFilterOptions>, saveToServer = true) => {
       Object.keys(property).forEach((key) => {
-        if (property[key as keyof typeof property]?.length === 0)
-          property[key as keyof typeof property] = null;
+        if (property[key as keyof typeof property]?.length === 0) property[key as keyof typeof property] = null;
       });
 
       dispatch({
diff --git a/web/contexts/profile-issues-context.tsx b/web/contexts/profile-issues-context.tsx
index e3f005334..44c17b50a 100644
--- a/web/contexts/profile-issues-context.tsx
+++ b/web/contexts/profile-issues-context.tsx
@@ -177,7 +177,6 @@ export const ProfileIssuesContextProvider: React.FC<{ children: React.ReactNode
         type: "SET_PROPERTIES",
         payload: {
           display_properties: {
-            ...state.display_properties,
             [key]: !state.display_properties[key],
           },
         },
diff --git a/web/contexts/project-member.context.tsx b/web/contexts/project-member.context.tsx
index 60cb8954f..5e594a733 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";
-
+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 = {
@@ -43,17 +40,14 @@ export const ProjectMemberProvider: React.FC<Props> = (props) => {
   const loading = !memberDetails && !error;
 
   return (
-    <ProjectMemberContext.Provider value={{ loading, memberDetails, error }}>
-      {children}
-    </ProjectMemberContext.Provider>
+    <ProjectMemberContext.Provider value={{ loading, memberDetails, error }}>{children}</ProjectMemberContext.Provider>
   );
 };
 
 export const useProjectMyMembership = () => {
   const context = useContext(ProjectMemberContext);
 
-  if (context === undefined)
-    throw new Error(`useProjectMember must be used within a ProjectMemberProvider.`);
+  if (context === undefined) throw new Error(`useProjectMember must be used within a ProjectMemberProvider.`);
 
   return {
     ...context,
diff --git a/web/contexts/theme.context.tsx b/web/contexts/theme.context.tsx
index d338b9b6b..e0c32328e 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";
+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;
 };
@@ -97,9 +100,7 @@ export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({
       if (theme === "custom") {
         if (user && user.theme.palette) {
           applyTheme(
-            user.theme.palette !== ",,,,"
-              ? user.theme.palette
-              : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+            user.theme.palette !== ",,,," ? user.theme.palette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
             user.theme.darkPalette
           );
         }
diff --git a/web/contexts/user-notification-context.tsx b/web/contexts/user-notification-context.tsx
index 32e93842e..831777d4a 100644
--- a/web/contexts/user-notification-context.tsx
+++ b/web/contexts/user-notification-context.tsx
@@ -1,18 +1,16 @@
 import { createContext, useCallback, useEffect, useReducer } from "react";
 
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import userNotificationServices from "services/notifications.service";
-
+import { NotificationService } from "services/notification.service";
 // fetch-keys
 import { UNREAD_NOTIFICATIONS_COUNT, USER_WORKSPACE_NOTIFICATIONS } from "constants/fetch-keys";
-
 // type
 import type { NotificationType, NotificationCount, IUserNotification } from "types";
 
+const notificationService = new NotificationService();
+
 export const userNotificationContext = createContext<ContextType>({} as ContextType);
 
 type UserNotificationProps = {
@@ -104,17 +102,12 @@ const UserNotificationContextProvider: React.FC<{
 
   const { data: notifications, mutate: notificationsMutate } = useSWR(
     workspaceSlug ? USER_WORKSPACE_NOTIFICATIONS(workspaceSlug.toString(), params) : null,
-    workspaceSlug
-      ? () => userNotificationServices.getUserNotifications(workspaceSlug.toString(), params)
-      : null
+    workspaceSlug ? () => notificationService.getUserNotifications(workspaceSlug.toString(), params) : null
   );
 
   const { data: notificationCount, mutate: mutateNotificationCount } = useSWR(
     workspaceSlug ? UNREAD_NOTIFICATIONS_COUNT(workspaceSlug.toString()) : null,
-    () =>
-      workspaceSlug
-        ? userNotificationServices.getUnreadNotificationsCount(workspaceSlug.toString())
-        : null
+    () => (workspaceSlug ? notificationService.getUnreadNotificationsCount(workspaceSlug.toString()) : null)
   );
 
   const handleReadMutation = (action: "read" | "unread") => {
@@ -124,11 +117,7 @@ const UserNotificationContextProvider: React.FC<{
       if (!prev) return prev;
 
       const notificationType: keyof NotificationCount =
-        selectedTab === "assigned"
-          ? "my_issues"
-          : selectedTab === "created"
-          ? "created_issues"
-          : "watching_issues";
+        selectedTab === "assigned" ? "my_issues" : selectedTab === "created" ? "created_issues" : "watching_issues";
 
       return {
         ...prev,
@@ -139,15 +128,12 @@ const UserNotificationContextProvider: React.FC<{
 
   const markNotificationReadStatus = async (notificationId: string) => {
     if (!workspaceSlug) return;
-    const isRead =
-      notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
+    const isRead = notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
 
     notificationsMutate(
       (previousNotifications: any) =>
         previousNotifications?.map((notification: any) =>
-          notification.id === notificationId
-            ? { ...notification, read_at: isRead ? null : new Date() }
-            : notification
+          notification.id === notificationId ? { ...notification, read_at: isRead ? null : new Date() } : notification
         ),
       false
     );
@@ -155,7 +141,7 @@ const UserNotificationContextProvider: React.FC<{
     handleReadMutation(isRead ? "unread" : "read");
 
     if (isRead) {
-      await userNotificationServices
+      await notificationService
         .markUserNotificationAsUnread(workspaceSlug.toString(), notificationId)
         .catch(() => {
           throw new Error("Something went wrong");
@@ -165,7 +151,7 @@ const UserNotificationContextProvider: React.FC<{
           mutateNotificationCount();
         });
     } else {
-      await userNotificationServices
+      await notificationService
         .markUserNotificationAsRead(workspaceSlug.toString(), notificationId)
         .catch(() => {
           throw new Error("Something went wrong");
@@ -179,16 +165,14 @@ const UserNotificationContextProvider: React.FC<{
 
   const markNotificationArchivedStatus = async (notificationId: string) => {
     if (!workspaceSlug) return;
-    const isArchived =
-      notifications?.find((notification) => notification.id === notificationId)?.archived_at !==
-      null;
+    const isArchived = notifications?.find((notification) => notification.id === notificationId)?.archived_at !== null;
 
     if (!isArchived) {
       handleReadMutation("read");
     }
 
     if (isArchived) {
-      await userNotificationServices
+      await notificationService
         .markUserNotificationAsUnarchived(workspaceSlug.toString(), notificationId)
         .catch(() => {
           throw new Error("Something went wrong");
@@ -199,11 +183,10 @@ const UserNotificationContextProvider: React.FC<{
         });
     } else {
       notificationsMutate(
-        (prev: any) =>
-          prev?.filter((prevNotification: any) => prevNotification.id !== notificationId),
+        (prev: any) => prev?.filter((prevNotification: any) => prevNotification.id !== notificationId),
         false
       );
-      await userNotificationServices
+      await notificationService
         .markUserNotificationAsArchived(workspaceSlug.toString(), notificationId)
         .catch(() => {
           throw new Error("Something went wrong");
@@ -218,9 +201,7 @@ const UserNotificationContextProvider: React.FC<{
   const markSnoozeNotification = async (notificationId: string, dateTime?: Date) => {
     if (!workspaceSlug) return;
 
-    const isSnoozed =
-      notifications?.find((notification) => notification.id === notificationId)?.snoozed_till !==
-      null;
+    const isSnoozed = notifications?.find((notification) => notification.id === notificationId)?.snoozed_till !== null;
 
     notificationsMutate(
       (previousNotifications: any) =>
@@ -233,7 +214,7 @@ const UserNotificationContextProvider: React.FC<{
     );
 
     if (isSnoozed) {
-      await userNotificationServices
+      await notificationService
         .patchUserNotification(workspaceSlug.toString(), notificationId, {
           snoozed_till: null,
         })
@@ -241,7 +222,7 @@ const UserNotificationContextProvider: React.FC<{
           notificationsMutate();
         });
     } else {
-      await userNotificationServices
+      await notificationService
         .patchUserNotification(workspaceSlug.toString(), notificationId, {
           snoozed_till: dateTime,
         })
diff --git a/web/contexts/user.context.tsx b/web/contexts/user.context.tsx
index 3f076b326..aeca99900 100644
--- a/web/contexts/user.context.tsx
+++ b/web/contexts/user.context.tsx
@@ -1,22 +1,23 @@
 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
-import type { ICurrentUserResponse, IUser } from "types";
+import type { IUser } from "types";
 
 interface IUserContextProps {
   user?: IUser;
   isUserLoading: boolean;
-  mutateUser: KeyedMutator<ICurrentUserResponse>;
+  mutateUser: KeyedMutator<IUser>;
   assignedIssuesLength?: number;
   workspaceInvitesLength?: number;
 }
 
+// services
+const userService = new UserService();
+
 export const UserContext = createContext<IUserContextProps>({} as IUserContextProps);
 
 export const UserProvider = ({ children }: { children: ReactElement }) => {
@@ -28,11 +29,9 @@ export const UserProvider = ({ children }: { children: ReactElement }) => {
   return (
     <UserContext.Provider
       value={{
-        user: error ? undefined : data?.user,
-        isUserLoading: Boolean(data?.user === undefined && error === undefined),
+        user: error ? undefined : data,
+        isUserLoading: Boolean(data === undefined && error === undefined),
         mutateUser: mutate,
-        assignedIssuesLength: data?.assigned_issues ?? 0,
-        workspaceInvitesLength: data?.workspace_invites ?? 0,
       }}
     >
       {children}
diff --git a/web/contexts/workspace-member.context.tsx b/web/contexts/workspace-member.context.tsx
index 5f34bd28b..d312751fe 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;
 
@@ -46,8 +49,7 @@ export const WorkspaceMemberProvider: React.FC<Props> = (props) => {
 export const useWorkspaceMyMembership = () => {
   const context = useContext(WorkspaceMemberContext);
 
-  if (context === undefined)
-    throw new Error(`useWorkspaceMember must be used within a WorkspaceMemberProvider.`);
+  if (context === undefined) throw new Error(`useWorkspaceMember must be used within a WorkspaceMemberProvider.`);
 
   return {
     ...context,
diff --git a/web/contexts/workspace-view-context.tsx b/web/contexts/workspace-view-context.tsx
deleted file mode 100644
index 9b9364637..000000000
--- 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 2ecbb2ef5..f389381f9 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/helpers/analytics.helper.ts b/web/helpers/analytics.helper.ts
index 08b763720..4e809cc60 100644
--- a/web/helpers/analytics.helper.ts
+++ b/web/helpers/analytics.helper.ts
@@ -1,7 +1,7 @@
 // nivo
 import { BarDatum } from "@nivo/bar";
 // helpers
-import { capitalizeFirstLetter, generateRandomColor } from "helpers/string.helper";
+import { addSpaceIfCamelCase, capitalizeFirstLetter, generateRandomColor } from "helpers/string.helper";
 // types
 import { IAnalyticsData, IAnalyticsParams, IAnalyticsResponse, TStateGroups } from "types";
 // constants
@@ -69,11 +69,13 @@ export const generateBarColor = (
 
   if (!analytics) return color;
 
-  if (params[type] === "state__name" || params[type] === "labels__name")
-    color = analytics?.extras?.colors.find((c) => c.name === value)?.color;
+  if (params[type] === "state_id")
+    color = analytics?.extras.state_details.find((s) => s.state_id === value)?.state__color;
 
-  if (params[type] === "state__group")
-    color = STATE_GROUP_COLORS[value.toLowerCase() as TStateGroups];
+  if (params[type] === "labels__id")
+    color = analytics?.extras.label_details.find((l) => l.labels__id === value)?.labels__color ?? undefined;
+
+  if (params[type] === "state__group") color = STATE_GROUP_COLORS[value.toLowerCase() as TStateGroups];
 
   if (params[type] === "priority") {
     const priority = value.toLowerCase();
@@ -93,11 +95,47 @@ export const generateBarColor = (
   return color ?? generateRandomColor(value);
 };
 
+export const generateDisplayName = (
+  value: string,
+  analytics: IAnalyticsResponse,
+  params: IAnalyticsParams,
+  type: "x_axis" | "segment"
+): string => {
+  let displayName = addSpaceIfCamelCase(value);
+
+  if (!analytics) return displayName;
+
+  if (params[type] === "assignees__id")
+    displayName =
+      analytics?.extras.assignee_details.find((a) => a.assignees__id === value)?.assignees__display_name ??
+      "No assignee";
+
+  if (params[type] === "issue_cycle__cycle_id")
+    displayName =
+      analytics?.extras.cycle_details.find((c) => c.issue_cycle__cycle_id === value)?.issue_cycle__cycle__name ??
+      "None";
+
+  if (params[type] === "issue_module__module_id")
+    displayName =
+      analytics?.extras.module_details.find((m) => m.issue_module__module_id === value)?.issue_module__module__name ??
+      "None";
+
+  if (params[type] === "labels__id")
+    displayName = analytics?.extras.label_details.find((l) => l.labels__id === value)?.labels__name ?? "None";
+
+  if (params[type] === "state_id")
+    displayName = analytics?.extras.state_details.find((s) => s.state_id === value)?.state__name ?? "None";
+
+  if (DATE_KEYS.includes(params.segment ?? "")) displayName = renderMonthAndYear(value);
+
+  return displayName;
+};
+
 export const renderMonthAndYear = (date: string | number | null): string => {
   if (!date || date === "") return "";
 
-  return (
-    (MONTHS_LIST.find((m) => `${m.value}` === `${date}`.split("-")[1])?.label.substring(0, 3) ??
-      "None") + ` ${date}`.split("-")[0] ?? ""
-  );
+  const monthNumber = parseInt(`${date}`.split("-")[1], 10);
+  const year = `${date}`.split("-")[0];
+
+  return (MONTHS_LIST[monthNumber]?.shortTitle ?? "None") + ` ${year}` ?? "";
 };
diff --git a/web/helpers/calendar.helper.ts b/web/helpers/calendar.helper.ts
index c037fca38..b00668894 100644
--- a/web/helpers/calendar.helper.ts
+++ b/web/helpers/calendar.helper.ts
@@ -1,79 +1,7 @@
-export const startOfWeek = (date: Date) => {
-  const startOfMonthDate = new Date(date.getFullYear(), date.getMonth(), 1);
-  const dayOfWeek = startOfMonthDate.getDay() % 7;
-  const startOfWeekDate = new Date(
-    startOfMonthDate.getFullYear(),
-    startOfMonthDate.getMonth(),
-    startOfMonthDate.getDate() - dayOfWeek
-  );
-  const timezoneOffset = startOfMonthDate.getTimezoneOffset();
-  const timezoneOffsetMilliseconds = timezoneOffset * 60 * 1000;
-  const startOfWeekAdjusted = new Date(startOfWeekDate.getTime() - timezoneOffsetMilliseconds);
-  return startOfWeekAdjusted;
-};
-
-export const lastDayOfWeek = (date: Date) => {
-  const lastDayOfPreviousMonth = new Date(date.getFullYear(), date.getMonth() + 1, 0);
-  const dayOfWeek = lastDayOfPreviousMonth.getDay() % 7;
-  const daysUntilEndOfWeek = 6 - dayOfWeek;
-  const lastDayOfWeekDate = new Date(
-    lastDayOfPreviousMonth.getFullYear(),
-    lastDayOfPreviousMonth.getMonth(),
-    lastDayOfPreviousMonth.getDate() + daysUntilEndOfWeek
-  );
-  const timezoneOffset = lastDayOfPreviousMonth.getTimezoneOffset();
-  const timezoneOffsetMilliseconds = timezoneOffset * 60 * 1000;
-  const lastDayOfWeekAdjusted = new Date(lastDayOfWeekDate.getTime() - timezoneOffsetMilliseconds);
-  return lastDayOfWeekAdjusted;
-};
-
-export const getCurrentWeekStartDate = (date: Date) => {
-  const today = new Date(date);
-  const dayOfWeek = today.getDay();
-  const startOfWeek = new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek);
-  const timezoneOffset = startOfWeek.getTimezoneOffset();
-  const timezoneOffsetMilliseconds = timezoneOffset * 60 * 1000;
-  const startOfWeekAdjusted = new Date(startOfWeek.getTime() - timezoneOffsetMilliseconds);
-  return startOfWeekAdjusted;
-};
-
-export const getCurrentWeekEndDate = (date: Date) => {
-  const today = new Date(date);
-  const dayOfWeek = today.getDay();
-  const endOfWeek = new Date(
-    today.getFullYear(),
-    today.getMonth(),
-    today.getDate() + (6 - dayOfWeek)
-  );
-  const timezoneOffset = endOfWeek.getTimezoneOffset();
-  const timezoneOffsetMilliseconds = timezoneOffset * 60 * 1000;
-  const endOfWeekAdjusted = new Date(endOfWeek.getTime() - timezoneOffsetMilliseconds);
-  return endOfWeekAdjusted;
-};
-
-export const eachDayOfInterval = ({ start, end }: { start: Date; end: Date }) => {
-  const days = [];
-  const current = new Date(start);
-  while (current <= end) {
-    days.push(new Date(current));
-    current.setDate(current.getDate() + 1);
-  }
-  return days;
-};
-
-export const weekDayInterval = ({ start, end }: { start: Date; end: Date }) => {
-  const dates = [];
-  const currentDate = new Date(start);
-  const endDate = new Date(end);
-  while (currentDate <= endDate) {
-    const dayOfWeek = currentDate.getDay();
-    if (dayOfWeek !== 0 && dayOfWeek !== 6) {
-      dates.push(new Date(currentDate));
-    }
-    currentDate.setDate(currentDate.getDate() + 1);
-  }
-  return dates;
-};
+// helpers
+import { getWeekNumberOfDate, renderDateFormat } from "helpers/date-time.helper";
+// types
+import { ICalendarDate, ICalendarPayload } from "components/issues";
 
 export const formatDate = (date: Date, format: string): string => {
   const day = date.getDate();
@@ -112,38 +40,53 @@ export const formatDate = (date: Date, format: string): string => {
   return formattedDate;
 };
 
-export const updateDateWithYear = (yearString: string, date: Date) => {
-  const year = parseInt(yearString);
-  const month = date.getMonth();
-  const day = date.getDate();
-  return new Date(year, month, day);
-};
+/**
+ * @returns {ICalendarPayload} calendar payload to render the calendar
+ * @param {ICalendarPayload | null} currentStructure current calendar payload
+ * @param {Date} startDate date of the month to render
+ * @description Returns calendar payload to render the calendar, if currentStructure is null, it will generate the payload for the month of startDate, else it will construct the payload for the month of startDate and append it to the currentStructure
+ */
+export const generateCalendarData = (currentStructure: ICalendarPayload | null, startDate: Date): ICalendarPayload => {
+  const calendarData: ICalendarPayload = currentStructure ?? {};
 
-export const updateDateWithMonth = (monthString: string, date: Date) => {
-  const month = parseInt(monthString) - 1;
-  const year = date.getFullYear();
-  const day = date.getDate();
-  return new Date(year, month, day);
-};
+  const startMonth = startDate.getMonth();
+  const startYear = startDate.getFullYear();
 
-export const isSameMonth = (monthString: string, date: Date) => {
-  const month = parseInt(monthString) - 1;
-  return month === date.getMonth();
-};
+  const currentDate = new Date(startYear, startMonth, 1);
+  const year = currentDate.getFullYear();
+  const month = currentDate.getMonth();
+  const totalDaysInMonth = new Date(year, month + 1, 0).getDate();
+  const firstDayOfMonth = new Date(year, month, 1).getDay(); // Sunday is 0, Monday is 1, ..., Saturday is 6
 
-export const isSameYear = (yearString: string, date: Date) => {
-  const year = parseInt(yearString);
-  return year === date.getFullYear();
-};
+  calendarData[`y-${year}`] ||= {};
+  calendarData[`y-${year}`][`m-${month}`] ||= {};
 
-export const addSevenDaysToDate = (date: Date) => {
-  const currentDate = new Date(date);
-  const newDate = new Date(currentDate.setDate(currentDate.getDate() + 7));
-  return newDate;
-};
+  const numWeeks = Math.ceil((totalDaysInMonth + firstDayOfMonth) / 7);
 
-export const subtract7DaysToDate = (date: Date) => {
-  const currentDate = new Date(date);
-  const newDate = new Date(currentDate.getTime() - 7 * 24 * 60 * 60 * 1000);
-  return newDate;
+  for (let week = 0; week < numWeeks; week++) {
+    const currentWeekObject: { [date: string]: ICalendarDate } = {};
+
+    const weekNumber = getWeekNumberOfDate(new Date(year, month, week * 7 - firstDayOfMonth + 1));
+
+    for (let i = 0; i < 7; i++) {
+      const dayNumber = week * 7 + i - firstDayOfMonth;
+
+      const date = new Date(year, month, dayNumber + 1);
+
+      currentWeekObject[renderDateFormat(date)] = {
+        date,
+        year,
+        month,
+        day: dayNumber + 1,
+        week: weekNumber,
+        is_current_month: date.getMonth() === month,
+        is_current_week: getWeekNumberOfDate(date) === getWeekNumberOfDate(new Date()),
+        is_today: date.toDateString() === new Date().toDateString(),
+      };
+    }
+
+    calendarData[`y-${year}`][`m-${month}`][`w-${weekNumber}`] = currentWeekObject;
+  }
+
+  return calendarData;
 };
diff --git a/web/helpers/date-time.helper.ts b/web/helpers/date-time.helper.ts
index 6784a9aa6..08dff4a18 100644
--- a/web/helpers/date-time.helper.ts
+++ b/web/helpers/date-time.helper.ts
@@ -130,10 +130,7 @@ export const formatDateDistance = (date: string | Date) => {
   }
 };
 
-export const getDateRangeStatus = (
-  startDate: string | null | undefined,
-  endDate: string | null | undefined
-) => {
+export const getDateRangeStatus = (startDate: string | null | undefined, endDate: string | null | undefined) => {
   if (!startDate || !endDate) return "draft";
 
   const today = renderDateFormat(new Date());
@@ -155,20 +152,7 @@ export const renderShortDateWithYearFormat = (date: string | Date, placeholder?:
 
   date = new Date(date);
 
-  const months = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   const day = date.getDate();
   const month = months[date.getMonth()];
   const year = date.getFullYear();
@@ -181,20 +165,7 @@ export const renderShortDate = (date: string | Date, placeholder?: string) => {
 
   date = new Date(date);
 
-  const months = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   const day = date.getDate();
   const month = months[date.getMonth()];
 
@@ -234,8 +205,7 @@ export const render24HourFormatTime = (date: string | Date): string => {
   return hours + ":" + minutes;
 };
 
-export const isDateRangeValid = (startDate: string, endDate: string) =>
-  new Date(startDate) < new Date(endDate);
+export const isDateRangeValid = (startDate: string, endDate: string) => new Date(startDate) < new Date(endDate);
 
 export const isDateGreaterThanToday = (dateStr: string) => {
   const date = new Date(dateStr);
@@ -331,8 +301,7 @@ export const getDatesAfterCurrentDate = (): Array<{
  * @example checkIfStringIsDate("2021-01-32") // false
  */
 
-export const checkIfStringIsDate = (date: string): boolean =>
-  new Date(date).toString() !== "Invalid Date";
+export const checkIfStringIsDate = (date: string): boolean => new Date(date).toString() !== "Invalid Date";
 
 // return an array of dates starting from 12:00 to 23:30 with 30 minutes interval as dates
 export const getDatesWith30MinutesInterval = (): Array<Date> => {
@@ -384,11 +353,7 @@ export const getAllTimeIn30MinutesInterval = (): Array<{
  * @example checkIfStringIsDate("2021-01-01", "2021-01-08") // 8
  */
 
-export const findTotalDaysInRange = (
-  startDate: Date | string,
-  endDate: Date | string,
-  inclusive: boolean
-): number => {
+export const findTotalDaysInRange = (startDate: Date | string, endDate: Date | string, inclusive: boolean): number => {
   if (!startDate || !endDate) return 0;
 
   startDate = new Date(startDate);
@@ -405,3 +370,46 @@ export const findTotalDaysInRange = (
 };
 
 export const getUserTimeZoneFromWindow = () => Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+/**
+ * @returns {number} week number of date
+ * @description Returns week number of date
+ * @param {Date} date
+ * @example getWeekNumber(new Date("2023-09-01")) // 35
+ */
+export const getWeekNumberOfDate = (date: Date): number => {
+  const currentDate = new Date(date);
+
+  // Adjust the starting day to Sunday (0) instead of Monday (1)
+  const startDate = new Date(currentDate.getFullYear(), 0, 1);
+
+  // Calculate the number of days between currentDate and startDate
+  const days = Math.floor((currentDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000));
+
+  // Adjust the calculation for weekNumber
+  const weekNumber = Math.ceil((days + 1) / 7);
+
+  return weekNumber;
+};
+
+/**
+ * @returns {Date} first date of week
+ * @description Returns week number of date
+ * @param {Date} date
+ * @example getFirstDateOfWeek(35, 2023) // 2023-08-27T00:00:00.000Z
+ */
+export const getFirstDateOfWeek = (date: Date): Date => {
+  const year = date.getFullYear();
+  const weekNumber = getWeekNumberOfDate(date);
+
+  const januaryFirst: Date = new Date(year, 0, 1); // January is month 0
+  const daysToAdd: number = (weekNumber - 1) * 7; // Subtract 1 from the week number since weeks are 0-indexed
+  const firstDateOfWeek: Date = new Date(januaryFirst);
+  firstDateOfWeek.setDate(januaryFirst.getDate() + daysToAdd);
+
+  // Adjust the date to Sunday (week start)
+  const dayOfWeek: number = firstDateOfWeek.getDay();
+  firstDateOfWeek.setDate(firstDateOfWeek.getDate() - dayOfWeek); // Move back to Sunday
+
+  return firstDateOfWeek;
+};
diff --git a/web/helpers/emoji.helper.tsx b/web/helpers/emoji.helper.tsx
index 7c9f3cfcb..38b830071 100644
--- a/web/helpers/emoji.helper.tsx
+++ b/web/helpers/emoji.helper.tsx
@@ -30,7 +30,7 @@ export const renderEmoji = (
 
   if (typeof emoji === "object")
     return (
-      <span style={{ color: emoji.color }} className="material-symbols-rounded text-lg">
+      <span style={{ color: emoji.color }} className="material-symbols-rounded !text-sm">
         {emoji.name}
       </span>
     );
@@ -41,16 +41,13 @@ export const groupReactions: (reactions: any[], key: string) => { [key: string]:
   reactions: any,
   key: string
 ) => {
-  const groupedReactions = reactions.reduce(
-    (acc: any, reaction: any) => {
-      if (!acc[reaction[key]]) {
-        acc[reaction[key]] = [];
-      }
-      acc[reaction[key]].push(reaction);
-      return acc;
-    },
-    {} as { [key: string]: any[] }
-  );
+  const groupedReactions = reactions.reduce((acc: any, reaction: any) => {
+    if (!acc[reaction[key]]) {
+      acc[reaction[key]] = [];
+    }
+    acc[reaction[key]].push(reaction);
+    return acc;
+  }, {} as { [key: string]: any[] });
 
   return groupedReactions;
 };
diff --git a/web/helpers/filter.helper.ts b/web/helpers/filter.helper.ts
new file mode 100644
index 000000000..001c07035
--- /dev/null
+++ b/web/helpers/filter.helper.ts
@@ -0,0 +1,32 @@
+// types
+import { IIssueFilterOptions } from "types";
+
+export const calculateTotalFilters = (filters: IIssueFilterOptions): number =>
+  filters && Object.keys(filters).length > 0
+    ? Object.keys(filters)
+        .map((key) =>
+          filters[key as keyof IIssueFilterOptions] !== null
+            ? isNaN((filters[key as keyof IIssueFilterOptions] as string[]).length)
+              ? 0
+              : (filters[key as keyof IIssueFilterOptions] as string[]).length
+            : 0
+        )
+        .reduce((curr, prev) => curr + prev, 0)
+    : 0;
+
+// check if there is any difference between the saved filters and the current filters
+export const areFiltersDifferent = (filtersSet1: IIssueFilterOptions, filtersSet2: IIssueFilterOptions) => {
+  for (const [key, value] of Object.entries(filtersSet1) as [keyof IIssueFilterOptions, string[] | null][]) {
+    if (value) {
+      if (Array.isArray(value) && Array.isArray(filtersSet2[key])) {
+        if (value.length !== filtersSet2[key]?.length) return true;
+
+        for (let i = 0; i < value.length; i++) {
+          if (!filtersSet2[key]?.includes(value[i])) return true;
+        }
+      } else if (value !== filtersSet2[key]) return true;
+    }
+  }
+
+  return false;
+};
diff --git a/web/helpers/issue.helper.ts b/web/helpers/issue.helper.ts
new file mode 100644
index 000000000..d0066c0e6
--- /dev/null
+++ b/web/helpers/issue.helper.ts
@@ -0,0 +1,115 @@
+// helpers
+import { orderArrayBy } from "helpers/array.helper";
+// types
+import { IIssue, TIssueGroupByOptions, TIssueLayouts, TIssueOrderByOptions, TIssueParams } from "types";
+// constants
+import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue";
+
+type THandleIssuesMutation = (
+  formData: Partial<IIssue>,
+  oldGroupTitle: string,
+  selectedGroupBy: TIssueGroupByOptions,
+  issueIndex: number,
+  orderBy: TIssueOrderByOptions,
+  prevData?:
+    | {
+        [key: string]: IIssue[];
+      }
+    | IIssue[]
+) =>
+  | {
+      [key: string]: IIssue[];
+    }
+  | IIssue[]
+  | undefined;
+
+export const handleIssuesMutation: THandleIssuesMutation = (
+  formData,
+  oldGroupTitle,
+  selectedGroupBy,
+  issueIndex,
+  orderBy,
+  prevData
+) => {
+  if (!prevData) return prevData;
+
+  if (Array.isArray(prevData)) {
+    const updatedIssue = {
+      ...prevData[issueIndex],
+      ...formData,
+      assignees: formData?.assignees_list ?? prevData[issueIndex]?.assignees,
+      labels: formData?.labels_list ?? prevData[issueIndex]?.labels,
+    };
+
+    prevData.splice(issueIndex, 1, updatedIssue);
+
+    return [...prevData];
+  } else {
+    const oldGroup = prevData[oldGroupTitle ?? ""] ?? [];
+
+    let newGroup: IIssue[] = [];
+
+    if (selectedGroupBy === "priority") newGroup = prevData[formData.priority ?? ""] ?? [];
+    else if (selectedGroupBy === "state") newGroup = prevData[formData.state ?? ""] ?? [];
+
+    const updatedIssue = {
+      ...oldGroup[issueIndex],
+      ...formData,
+      assignees: formData?.assignees_list ?? oldGroup[issueIndex]?.assignees,
+      labels: formData?.labels_list ?? oldGroup[issueIndex]?.labels,
+    };
+
+    if (selectedGroupBy !== Object.keys(formData)[0])
+      return {
+        ...prevData,
+        [oldGroupTitle ?? ""]: orderArrayBy(
+          oldGroup.map((i) => (i.id === updatedIssue.id ? updatedIssue : i)),
+          orderBy
+        ),
+      };
+
+    const groupThatIsUpdated = selectedGroupBy === "priority" ? formData.priority : formData.state;
+
+    return {
+      ...prevData,
+      [oldGroupTitle ?? ""]: orderArrayBy(
+        oldGroup.filter((i) => i.id !== updatedIssue.id),
+        orderBy
+      ),
+      [groupThatIsUpdated ?? ""]: orderArrayBy([...newGroup, updatedIssue], orderBy),
+    };
+  }
+};
+
+export const handleIssueQueryParamsByLayout = (
+  layout: TIssueLayouts | undefined,
+  viewType: "my_issues" | "issues"
+): TIssueParams[] | null => {
+  const queryParams: TIssueParams[] = [];
+
+  if (!layout) return null;
+
+  const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout];
+
+  // add filters query params
+  layoutOptions.filters.forEach((option) => {
+    queryParams.push(option);
+  });
+
+  // add display filters query params
+  Object.keys(layoutOptions.display_filters).forEach((option) => {
+    queryParams.push(option as TIssueParams);
+  });
+
+  // add extra options query params
+  if (layoutOptions.extra_options.access) {
+    layoutOptions.extra_options.values.forEach((option) => {
+      queryParams.push(option);
+    });
+  }
+
+  // add start_target_date query param for the gantt_chart layout
+  if (layout === "gantt_chart") queryParams.push("start_target_date");
+
+  return queryParams;
+};
diff --git a/web/helpers/string.helper.ts b/web/helpers/string.helper.ts
index d1e0e98b7..8090580b9 100644
--- a/web/helpers/string.helper.ts
+++ b/web/helpers/string.helper.ts
@@ -135,47 +135,10 @@ export const getFetchKeysForIssueMutation = (options: {
   moduleId?: string | string[];
   viewId?: string | string[];
   projectId: string;
-  calendarParams: any;
-  spreadsheetParams: any;
   viewGanttParams: any;
   ganttParams: any;
 }) => {
-  const {
-    cycleId,
-    moduleId,
-    viewId,
-    projectId,
-    calendarParams,
-    spreadsheetParams,
-    viewGanttParams,
-    ganttParams,
-  } = options;
-
-  const calendarFetchKey = cycleId
-    ? { calendarFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), calendarParams) }
-    : moduleId
-    ? { calendarFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), calendarParams) }
-    : viewId
-    ? { calendarFetchKey: VIEW_ISSUES(viewId.toString(), calendarParams) }
-    : {
-        calendarFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(
-          projectId?.toString() ?? "",
-          calendarParams
-        ),
-      };
-
-  const spreadsheetFetchKey = cycleId
-    ? { spreadsheetFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), spreadsheetParams) }
-    : moduleId
-    ? { spreadsheetFetchKey: MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), spreadsheetParams) }
-    : viewId
-    ? { spreadsheetFetchKey: VIEW_ISSUES(viewId.toString(), spreadsheetParams) }
-    : {
-        spreadsheetFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(
-          projectId?.toString() ?? "",
-          spreadsheetParams
-        ),
-      };
+  const { cycleId, moduleId, viewId, projectId, viewGanttParams, ganttParams } = options;
 
   const ganttFetchKey = cycleId
     ? { ganttFetchKey: CYCLE_ISSUES_WITH_PARAMS(cycleId.toString(), ganttParams) }
@@ -186,8 +149,6 @@ export const getFetchKeysForIssueMutation = (options: {
     : { ganttFetchKey: PROJECT_ISSUES_LIST_WITH_PARAMS(projectId?.toString() ?? "", ganttParams) };
 
   return {
-    ...calendarFetchKey,
-    ...spreadsheetFetchKey,
     ...ganttFetchKey,
   };
 };
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 21af66661..000000000
--- a/web/hooks/gantt-chart/cycle-issues-view.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import useSWR from "swr";
-
-// services
-import cyclesService from "services/cycles.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
index c2f6972fa..138330ab2 100644
--- a/web/hooks/gantt-chart/issue-view.tsx
+++ b/web/hooks/gantt-chart/issue-view.tsx
@@ -1,12 +1,13 @@
 import useSWR from "swr";
-
 // services
-import issuesService from "services/issues.service";
+import { IssueService } from "services/issue";
 // hooks
 import useIssuesView from "hooks/use-issues-view";
 // fetch-keys
 import { PROJECT_ISSUES_LIST_WITH_PARAMS } from "constants/fetch-keys";
 
+const issueService = new IssueService();
+
 const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: string | undefined) => {
   const { displayFilters, filters } = useIssuesView();
 
@@ -28,8 +29,7 @@ const useGanttChartIssues = (workspaceSlug: string | undefined, projectId: strin
   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)
+      ? () => issueService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
       : null
   );
 
diff --git a/web/hooks/gantt-chart/module-issues-view.tsx b/web/hooks/gantt-chart/module-issues-view.tsx
deleted file mode 100644
index 5be58702e..000000000
--- a/web/hooks/gantt-chart/module-issues-view.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import useSWR from "swr";
-
-// services
-import modulesService from "services/modules.service";
-// hooks
-import useIssuesView from "hooks/use-issues-view";
-// fetch-keys
-import { MODULE_ISSUES_WITH_PARAMS } from "constants/fetch-keys";
-
-const useGanttChartModuleIssues = (
-  workspaceSlug: string | undefined,
-  projectId: string | undefined,
-  moduleId: 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 && moduleId
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId.toString(), params)
-      : null,
-    workspaceSlug && projectId && moduleId
-      ? () =>
-          modulesService.getModuleIssuesWithParams(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            moduleId.toString(),
-            params
-          )
-      : null
-  );
-
-  return {
-    ganttIssues,
-    mutateGanttIssues,
-  };
-};
-
-export default useGanttChartModuleIssues;
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 8e0bc496b..000000000
--- a/web/hooks/gantt-chart/view-issues-view.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import useSWR from "swr";
-
-// services
-import issuesService from "services/issues.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/my-issues/use-my-issues-filter.tsx b/web/hooks/my-issues/use-my-issues-filter.tsx
index bc6a964c3..f9b54b8ce 100644
--- a/web/hooks/my-issues/use-my-issues-filter.tsx
+++ b/web/hooks/my-issues/use-my-issues-filter.tsx
@@ -1,9 +1,7 @@
 import { useEffect, useCallback } from "react";
-
 import useSWR, { mutate } from "swr";
-
 // services
-import workspaceService from "services/workspace.service";
+import { WorkspaceService } from "services/workspace.service";
 // types
 import {
   IIssueDisplayFilterOptions,
@@ -15,6 +13,8 @@ import {
 // fetch-keys
 import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
 
+const workspaceService = new WorkspaceService();
+
 const initialValues: IWorkspaceViewProps = {
   display_filters: {
     group_by: null,
@@ -103,12 +103,7 @@ const useMyIssuesFilters = (workspaceSlug: string | undefined) => {
         },
       };
 
-      if (
-        displayFilter.layout &&
-        displayFilter.layout === "kanban" &&
-        groupBy === null &&
-        payload.display_filters
-      )
+      if (displayFilter.layout && displayFilter.layout === "kanban" && groupBy === null && payload.display_filters)
         payload.display_filters.group_by = "state_detail.group";
 
       saveData(payload);
diff --git a/web/hooks/my-issues/use-my-issues.tsx b/web/hooks/my-issues/use-my-issues.tsx
index 3e79d6f1e..f9ced3990 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-calendar-issues-view.tsx b/web/hooks/use-calendar-issues-view.tsx
deleted file mode 100644
index 5f21d63c5..000000000
--- a/web/hooks/use-calendar-issues-view.tsx
+++ /dev/null
@@ -1,150 +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/cycles.service";
-import modulesService from "services/modules.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/hooks/use-comment-reaction.tsx b/web/hooks/use-comment-reaction.tsx
index 92b4b9c17..af1d0a90f 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/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(),
@@ -69,12 +69,11 @@ const useCommentReaction = (
     if (!workspaceSlug || !projectId || !commendId) return;
 
     mutateCommentReactions(
-      (prevData: any) =>
-        prevData?.filter((r: any) => r.actor !== user?.user?.id || r.reaction !== reaction) || [],
+      (prevData: any) => prevData?.filter((r: any) => r.actor !== user?.user?.id || r.reaction !== reaction) || [],
       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 61a93ca59..6d64c9665 100644
--- a/web/hooks/use-estimate-option.tsx
+++ b/web/hooks/use-estimate-option.tsx
@@ -1,9 +1,7 @@
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import estimatesService from "services/estimates.service";
+import { ProjectEstimateService } from "services/project";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 // helpers
@@ -11,19 +9,22 @@ import { orderArrayBy } from "helpers/array.helper";
 // fetch-keys
 import { ESTIMATE_DETAILS } from "constants/fetch-keys";
 
+// services
+const projectEstimateService = new ProjectEstimateService();
+
 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
@@ -32,9 +33,7 @@ const useEstimateOption = (estimateKey?: number | null) => {
   );
 
   const estimateValue: any =
-    estimateKey || estimateKey === 0
-      ? estimateDetails?.points?.find((e) => e.key === estimateKey)?.value
-      : "None";
+    estimateKey || estimateKey === 0 ? estimateDetails?.points?.find((e) => e.key === estimateKey)?.value : "None";
 
   return {
     isEstimateActive: projectDetails?.estimate ? true : false,
diff --git a/web/hooks/use-inbox-view.tsx b/web/hooks/use-inbox-view.tsx
index a5dedc380..ed3c28883 100644
--- a/web/hooks/use-inbox-view.tsx
+++ b/web/hooks/use-inbox-view.tsx
@@ -7,12 +7,14 @@ import useSWR from "swr";
 // contexts
 import { inboxViewContext } from "contexts/inbox-view-context";
 // services
-import inboxServices from "services/inbox.service";
+import { InboxService } from "services/inbox.service";
 // types
 import { IInboxQueryParams } from "types";
 // fetch-keys
 import { INBOX_ISSUES } from "constants/fetch-keys";
 
+const inboxService = new InboxService();
+
 const useInboxView = () => {
   const { filters, setFilters, clearAllFilters } = useContext(inboxViewContext);
 
@@ -25,17 +27,9 @@ const useInboxView = () => {
   };
 
   const { data: inboxIssues, mutate: mutateInboxIssues } = useSWR(
+    workspaceSlug && projectId && inboxId && params ? INBOX_ISSUES(inboxId.toString(), params) : null,
     workspaceSlug && projectId && inboxId && params
-      ? INBOX_ISSUES(inboxId.toString(), params)
-      : null,
-    workspaceSlug && projectId && inboxId && params
-      ? () =>
-          inboxServices.getInboxIssues(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            inboxId.toString(),
-            params
-          )
+      ? () => inboxService.getInboxIssues(workspaceSlug.toString(), projectId.toString(), inboxId.toString(), params)
       : null
   );
 
@@ -43,8 +37,7 @@ const useInboxView = () => {
   Object.keys(filters ?? {}).forEach((key) => {
     const filterKey = key as keyof typeof filters;
 
-    if (filters[filterKey] && Array.isArray(filters[filterKey]))
-      filtersLength += (filters[filterKey] ?? []).length;
+    if (filters[filterKey] && Array.isArray(filters[filterKey])) filtersLength += (filters[filterKey] ?? []).length;
   });
 
   return {
diff --git a/web/hooks/use-issue-notification-subscription.tsx b/web/hooks/use-issue-notification-subscription.tsx
index a118bdf6a..6b1de86a6 100644
--- a/web/hooks/use-issue-notification-subscription.tsx
+++ b/web/hooks/use-issue-notification-subscription.tsx
@@ -1,11 +1,11 @@
 import { useCallback } from "react";
-
 import useSWR from "swr";
-
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
-import userNotificationServices from "services/notifications.service";
+import { NotificationService } from "services/notification.service";
+
+const userNotificationServices = new NotificationService();
 
 const useUserIssueNotificationSubscription = (
   workspaceSlug?: string | string[] | null,
@@ -15,9 +15,7 @@ const useUserIssueNotificationSubscription = (
   const { user } = useUserAuth();
 
   const { data, error, mutate } = useSWR(
-    workspaceSlug && projectId && issueId
-      ? `SUBSCRIPTION_STATUE_${workspaceSlug}_${projectId}_${issueId}`
-      : null,
+    workspaceSlug && projectId && issueId ? `SUBSCRIPTION_STATUE_${workspaceSlug}_${projectId}_${issueId}` : null,
     workspaceSlug && projectId && issueId
       ? () =>
           userNotificationServices.getIssueNotificationSubscriptionStatus(
@@ -39,11 +37,7 @@ const useUserIssueNotificationSubscription = (
     );
 
     userNotificationServices
-      .unsubscribeFromIssueNotifications(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        issueId.toString()
-      )
+      .unsubscribeFromIssueNotifications(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       .then(() => {
         mutate({
           subscribed: false,
@@ -62,11 +56,7 @@ const useUserIssueNotificationSubscription = (
     );
 
     userNotificationServices
-      .subscribeToIssueNotifications(
-        workspaceSlug.toString(),
-        projectId.toString(),
-        issueId.toString()
-      )
+      .subscribeToIssueNotifications(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       .then(() => {
         mutate({
           subscribed: true,
diff --git a/web/hooks/use-issue-properties.tsx b/web/hooks/use-issue-properties.tsx
index 6f4f093e0..6908b6669 100644
--- a/web/hooks/use-issue-properties.tsx
+++ b/web/hooks/use-issue-properties.tsx
@@ -1,14 +1,14 @@
 import { useState, useEffect, useCallback } from "react";
-
 import useSWR from "swr";
-
 // services
-import issueServices from "services/issues.service";
+import { IssueService } from "services/issue";
 // hooks
 import useUser from "hooks/use-user";
 // types
 import { IssuePriorities, Properties } from "types";
 
+const issueService = new IssueService();
+
 const initialValues: Properties = {
   assignee: true,
   start_date: true,
@@ -31,12 +31,8 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
   const { user } = useUser();
 
   const { data: issueProperties, mutate: mutateIssueProperties } = useSWR<IssuePriorities>(
-    workspaceSlug && projectId
-      ? `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`
-      : null,
-    workspaceSlug && projectId
-      ? () => issueServices.getIssueProperties(workspaceSlug, projectId)
-      : null
+    workspaceSlug && projectId ? `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/` : null,
+    workspaceSlug && projectId ? () => issueService.getIssueProperties(workspaceSlug, projectId) : null
   );
 
   useEffect(() => {
@@ -45,12 +41,12 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
     setProperties({ ...initialValues, ...issueProperties.properties });
 
     if (Object.keys(issueProperties).length === 0)
-      issueServices.createIssueProperties(workspaceSlug, projectId, {
+      issueService.createIssueProperties(workspaceSlug, projectId, {
         properties: { ...initialValues },
         user: user.id,
       });
     else if (Object.keys(issueProperties?.properties).length === 0)
-      issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
+      issueService.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
         properties: { ...initialValues },
         user: user.id,
       });
@@ -68,11 +64,11 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
             ({
               ...prev,
               properties: { ...prev?.properties, [key]: !prev?.properties?.[key] },
-            }) as IssuePriorities,
+            } as IssuePriorities),
           false
         );
         if (Object.keys(issueProperties).length > 0) {
-          issueServices.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
+          issueService.patchIssueProperties(workspaceSlug, projectId, issueProperties.id, {
             properties: {
               ...issueProperties.properties,
               [key]: !issueProperties.properties[key],
@@ -80,7 +76,7 @@ const useIssuesProperties = (workspaceSlug?: string, projectId?: string) => {
             user: user.id,
           });
         } else {
-          issueServices.createIssueProperties(workspaceSlug, projectId, {
+          issueService.createIssueProperties(workspaceSlug, projectId, {
             properties: { ...initialValues },
             user: user.id,
           });
diff --git a/web/hooks/use-issue-reaction.tsx b/web/hooks/use-issue-reaction.tsx
index fabab98d2..c4ea210de 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/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,
@@ -29,11 +28,7 @@ const useIssueReaction = (
       : null,
     workspaceSlug && projectId && issueId
       ? () =>
-          reactionService.listIssueReactions(
-            workspaceSlug.toString(),
-            projectId.toString(),
-            issueId.toString()
-          )
+          issueReactionService.listIssueReactions(workspaceSlug.toString(), projectId.toString(), issueId.toString())
       : null
   );
 
@@ -48,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(),
@@ -69,12 +64,11 @@ const useIssueReaction = (
     if (!workspaceSlug || !projectId || !issueId) return;
 
     mutateReaction(
-      (prevData: any) =>
-        prevData?.filter((r: any) => r.actor !== user?.user?.id || r.reaction !== reaction) || [],
+      (prevData: any) => prevData?.filter((r: any) => r.actor !== user?.user?.id || r.reaction !== reaction) || [],
       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 1f15c09f9..fa5f26d4e 100644
--- a/web/hooks/use-issues-view.tsx
+++ b/web/hooks/use-issues-view.tsx
@@ -1,16 +1,13 @@
 import { useContext, useMemo } 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/cycles.service";
-import modulesService from "services/modules.service";
-import stateService from "services/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 +23,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,
@@ -56,12 +61,9 @@ const useIssuesView = () => {
   };
 
   const { data: projectIssues, mutate: mutateProjectIssues } = useSWR(
+    workspaceSlug && projectId && params ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId as string, params) : null,
     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
   );
 
@@ -70,7 +72,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
   );
 
@@ -79,32 +81,23 @@ 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
   );
 
   const { data: cycleIssues, mutate: mutateCycleIssues } = useSWR(
-    workspaceSlug && projectId && cycleId && params
-      ? CYCLE_ISSUES_WITH_PARAMS(cycleId as string, params)
-      : null,
+    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
   );
 
   const { data: moduleIssues, mutate: mutateModuleIssues } = useSWR(
-    workspaceSlug && projectId && moduleId && params
-      ? MODULE_ISSUES_WITH_PARAMS(moduleId as string, params)
-      : null,
+    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,
@@ -116,21 +109,18 @@ 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)
+      ? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
   const statesList = getStatesList(states);
-  const activeStatesList = statesList?.filter(
-    (state) => state.group === "started" || state.group === "unstarted"
-  );
+  const activeStatesList = statesList?.filter((state) => state.group === "started" || state.group === "unstarted");
   const backlogStatesList = statesList?.filter((state) => state.group === "backlog");
 
   const stateIds =
@@ -141,8 +131,7 @@ const useIssuesView = () => {
       : statesList?.map((state) => state.id);
 
   const filteredStateIds =
-    (filters && filters?.state ? stateIds?.filter((s) => filters.state?.includes(s)) : stateIds) ??
-    [];
+    (filters && filters?.state ? stateIds?.filter((s) => filters.state?.includes(s)) : stateIds) ?? [];
 
   const emptyStatesObject: { [key: string]: [] } = {};
   for (let i = 0; i < filteredStateIds.length; i++) {
diff --git a/web/hooks/use-local-storage.tsx b/web/hooks/use-local-storage.tsx
index 0eb7e20f3..e13165bf8 100644
--- a/web/hooks/use-local-storage.tsx
+++ b/web/hooks/use-local-storage.tsx
@@ -12,9 +12,7 @@ const getValueFromLocalStorage = (key: string, defaultValue: any) => {
 };
 
 const useLocalStorage = <T,>(key: string, initialValue: T) => {
-  const [storedValue, setStoredValue] = useState<T | null>(() =>
-    getValueFromLocalStorage(key, initialValue)
-  );
+  const [storedValue, setStoredValue] = useState<T | null>(() => getValueFromLocalStorage(key, initialValue));
 
   const setValue = useCallback(
     (value: T) => {
diff --git a/web/hooks/use-profile-issues.tsx b/web/hooks/use-profile-issues.tsx
index 263aa307c..fabe88014 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 477c82587..4a6fdd690 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";
+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;
@@ -17,9 +19,7 @@ const useProjectDetails = () => {
     mutate: mutateProjectDetails,
   } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
   );
 
   return {
diff --git a/web/hooks/use-project-members.tsx b/web/hooks/use-project-members.tsx
index b810dcef9..4b7abe641 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";
+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,
@@ -17,20 +19,14 @@ const useProjectMembers = (
   // fetching project members
   const { data: members } = useSWR(
     workspaceSlug && projectId && fetchCondition ? PROJECT_MEMBERS(projectId) : null,
-    workspaceSlug && projectId && fetchCondition
-      ? () => projectService.projectMembers(workspaceSlug, projectId)
-      : null
+    workspaceSlug && projectId && fetchCondition ? () => projectService.projectMembers(workspaceSlug, projectId) : null
   );
 
   const hasJoined = members?.some((item: any) => item.member.id === (user as any)?.id);
 
   const isOwner = members?.some((item) => item.member.id === (user as any)?.id && item.role === 20);
-  const isMember = members?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 15
-  );
-  const isViewer = members?.some(
-    (item) => item.member.id === (user as any)?.id && item.role === 10
-  );
+  const isMember = members?.some((item) => item.member.id === (user as any)?.id && item.role === 15);
+  const isViewer = members?.some((item) => item.member.id === (user as any)?.id && item.role === 10);
   const isGuest = members?.some((item) => item.member.id === (user as any)?.id && item.role === 5);
 
   return {
diff --git a/web/hooks/use-projects.tsx b/web/hooks/use-projects.tsx
index 3363ff278..3983a2e40 100644
--- a/web/hooks/use-projects.tsx
+++ b/web/hooks/use-projects.tsx
@@ -1,9 +1,7 @@
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // helpers
 import { orderArrayBy } from "helpers/array.helper";
 // types
@@ -11,6 +9,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;
 
@@ -18,12 +18,8 @@ const useProjects = (type?: "all" | boolean, fetchCondition?: boolean) => {
   const { workspaceSlug } = router.query;
 
   const { data: projects, mutate: mutateProjects } = useSWR(
-    workspaceSlug && fetchCondition
-      ? PROJECTS_LIST(workspaceSlug as string, { is_favorite: type ?? "all" })
-      : null,
-    workspaceSlug && fetchCondition
-      ? () => projectService.getProjects(workspaceSlug as string, { is_favorite: type ?? "all" })
-      : null
+    workspaceSlug && fetchCondition ? PROJECTS_LIST(workspaceSlug as string, { is_favorite: type ?? "all" }) : null,
+    workspaceSlug && fetchCondition ? () => projectService.getProjects(workspaceSlug as string) : null
   );
 
   const recentProjects = [...(projects ?? [])]
@@ -31,9 +27,7 @@ const useProjects = (type?: "all" | boolean, fetchCondition?: boolean) => {
     ?.slice(0, 3);
 
   return {
-    projects: projects
-      ? (orderArrayBy(projects, "is_favorite", "descending") as IProject[])
-      : undefined,
+    projects: projects ? (orderArrayBy(projects, "is_favorite", "descending") as IProject[]) : undefined,
     recentProjects: recentProjects || [],
     mutateProjects,
   };
diff --git a/web/hooks/use-spreadsheet-issues-view.tsx b/web/hooks/use-spreadsheet-issues-view.tsx
deleted file mode 100644
index 5aa86c600..000000000
--- a/web/hooks/use-spreadsheet-issues-view.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { useContext } 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/cycles.service";
-import modulesService from "services/modules.service";
-// 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 useSpreadsheetIssuesView = () => {
-  const {
-    display_filters: displayFilters,
-    setDisplayFilters,
-    filters,
-    setFilters,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-  } = useContext(issueViewContext);
-
-  const router = useRouter();
-  const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
-
-  const params: any = {
-    order_by: displayFilters?.order_by,
-    assignees: filters?.assignees ? filters?.assignees.join(",") : undefined,
-    state: filters?.state ? filters?.state.join(",") : undefined,
-    priority: filters?.priority ? filters?.priority.join(",") : undefined,
-    type: displayFilters?.type ? displayFilters?.type : undefined,
-    labels: filters?.labels ? filters?.labels.join(",") : undefined,
-    created_by: filters?.created_by ? filters?.created_by.join(",") : undefined,
-    start_date: filters?.start_date ? filters?.start_date.join(",") : undefined,
-    target_date: filters?.target_date ? filters?.target_date.join(",") : undefined,
-    sub_issue: "false",
-  };
-
-  const { data: projectSpreadsheetIssues, mutate: mutateProjectSpreadsheetIssues } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_ISSUES_LIST_WITH_PARAMS(projectId.toString(), params)
-      : null,
-    workspaceSlug && projectId
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  const { data: cycleSpreadsheetIssues, mutate: mutateCycleSpreadsheetIssues } = 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: moduleSpreadsheetIssues, mutate: mutateModuleSpreadsheetIssues } = 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: viewSpreadsheetIssues, mutate: mutateViewSpreadsheetIssues } = useSWR(
-    workspaceSlug && projectId && viewId && params ? VIEW_ISSUES(viewId.toString(), params) : null,
-    workspaceSlug && projectId && viewId && params
-      ? () =>
-          issuesService.getIssuesWithParams(workspaceSlug.toString(), projectId.toString(), params)
-      : null
-  );
-
-  const spreadsheetIssues = cycleId
-    ? (cycleSpreadsheetIssues as IIssue[])
-    : moduleId
-    ? (moduleSpreadsheetIssues as IIssue[])
-    : viewId
-    ? (viewSpreadsheetIssues as IIssue[])
-    : (projectSpreadsheetIssues as IIssue[]);
-
-  return {
-    displayFilters,
-    setDisplayFilters,
-    mutateIssues: cycleId
-      ? mutateCycleSpreadsheetIssues
-      : moduleId
-      ? mutateModuleSpreadsheetIssues
-      : viewId
-      ? mutateViewSpreadsheetIssues
-      : mutateProjectSpreadsheetIssues,
-    spreadsheetIssues: spreadsheetIssues ?? [],
-    filters,
-    setFilters,
-    params,
-    resetFilterToDefault,
-    setNewFilterDefaultView,
-  } as const;
-};
-
-export default useSpreadsheetIssuesView;
diff --git a/web/hooks/use-sub-issue.tsx b/web/hooks/use-sub-issue.tsx
index 26b84ba5a..a1d2e281c 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/issues.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,10 +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 d3116ce06..b6de6b964 100644
--- a/web/hooks/use-user-auth.tsx
+++ b/web/hooks/use-user-auth.tsx
@@ -6,10 +6,13 @@ 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";
+import type { IWorkspace, IUser } from "types";
+
+const userService = new UserService();
+const workspaceService = new WorkspaceService();
 
 const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "admin") => {
   const router = useRouter();
@@ -22,7 +25,7 @@ const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "adm
     isLoading,
     error,
     mutate,
-  } = useSWR<ICurrentUserResponse>(CURRENT_USER, () => userService.currentUser(), {
+  } = useSWR<IUser>(CURRENT_USER, () => userService.currentUser(), {
     refreshInterval: 0,
     shouldRetryOnError: false,
   });
@@ -109,8 +112,8 @@ const useUserAuth = (routeAuth: "sign-in" | "onboarding" | "admin" | null = "adm
     isLoading: isRouteAccess,
     user: error ? undefined : user,
     mutateUser: mutate,
-    assignedIssuesLength: user?.assigned_issues ?? 0,
-    workspaceInvitesLength: user?.workspace_invites ?? 0,
+    // assignedIssuesLength: user?.assigned_issues ?? 0,
+    // workspaceInvitesLength: user?.workspace_invites ?? 0,
   };
 };
 
diff --git a/web/hooks/use-user-notifications.tsx b/web/hooks/use-user-notifications.tsx
index 5ddc9ddf5..866aaffb5 100644
--- a/web/hooks/use-user-notifications.tsx
+++ b/web/hooks/use-user-notifications.tsx
@@ -1,25 +1,21 @@
 import { useMemo, useState } from "react";
-
 import { useRouter } from "next/router";
-
 // swr
 import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
-
 // services
-import userNotificationServices from "services/notifications.service";
-
+import { NotificationService } from "services/notification.service";
 // hooks
 import useToast from "./use-toast";
-
 // fetch-keys
 import { UNREAD_NOTIFICATIONS_COUNT, getPaginatedNotificationKey } from "constants/fetch-keys";
-
 // type
 import type { NotificationType, NotificationCount, IMarkAllAsReadPayload } from "types";
 
 const PER_PAGE = 30;
 
+const userNotificationServices = new NotificationService();
+
 const useUserNotification = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -30,9 +26,7 @@ const useUserNotification = () => {
   const [archived, setArchived] = useState<boolean>(false);
   const [readNotification, setReadNotification] = useState<boolean>(false);
   const [fetchNotifications, setFetchNotifications] = useState<boolean>(false);
-  const [selectedNotificationForSnooze, setSelectedNotificationForSnooze] = useState<string | null>(
-    null
-  );
+  const [selectedNotificationForSnooze, setSelectedNotificationForSnooze] = useState<string | null>(null);
   const [selectedTab, setSelectedTab] = useState<NotificationType>("assigned");
 
   const params = useMemo(
@@ -55,26 +49,20 @@ const useUserNotification = () => {
     mutate: notificationMutate,
   } = useSWRInfinite(
     fetchNotifications && workspaceSlug
-      ? (index, prevData) =>
-          getPaginatedNotificationKey(index, prevData, workspaceSlug.toString(), params)
+      ? (index, prevData) => getPaginatedNotificationKey(index, prevData, workspaceSlug.toString(), params)
       : () => null,
     async (url: string) => await userNotificationServices.getNotifications(url)
   );
 
-  const isLoadingMore =
-    isLoading || (size > 0 && paginatedData && typeof paginatedData[size - 1] === "undefined");
+  const isLoadingMore = isLoading || (size > 0 && paginatedData && typeof paginatedData[size - 1] === "undefined");
   const isEmpty = paginatedData?.[0]?.results?.length === 0;
   const notifications = paginatedData ? paginatedData.map((d) => d.results).flat() : undefined;
-  const hasMore =
-    isEmpty || (paginatedData && paginatedData[paginatedData.length - 1].next_page_results);
+  const hasMore = isEmpty || (paginatedData && paginatedData[paginatedData.length - 1].next_page_results);
   const isRefreshing = isValidating && paginatedData && paginatedData.length === size;
 
   const { data: notificationCount, mutate: mutateNotificationCount } = useSWR(
     workspaceSlug ? UNREAD_NOTIFICATIONS_COUNT(workspaceSlug.toString()) : null,
-    () =>
-      workspaceSlug
-        ? userNotificationServices.getUnreadNotificationsCount(workspaceSlug.toString())
-        : null
+    () => (workspaceSlug ? userNotificationServices.getUnreadNotificationsCount(workspaceSlug.toString()) : null)
   );
 
   const handleReadMutation = (action: "read" | "unread") => {
@@ -84,11 +72,7 @@ const useUserNotification = () => {
       if (!prev) return prev;
 
       const notificationType: keyof NotificationCount =
-        selectedTab === "assigned"
-          ? "my_issues"
-          : selectedTab === "created"
-          ? "created_issues"
-          : "watching_issues";
+        selectedTab === "assigned" ? "my_issues" : selectedTab === "created" ? "created_issues" : "watching_issues";
 
       return {
         ...prev,
@@ -114,17 +98,14 @@ const useUserNotification = () => {
 
       if (notificationIndexInPage === -1) return previousNotifications;
 
-      notificationIndexInPage =
-        notificationIndexInPage === -1 ? 0 : notificationIndexInPage % PER_PAGE;
+      notificationIndexInPage = notificationIndexInPage === -1 ? 0 : notificationIndexInPage % PER_PAGE;
 
       if (notificationIndex === -1) return previousNotifications;
 
       if (notificationIndexInPage === -1) return previousNotifications;
 
       const key = Object.keys(value)[0];
-      (previousNotifications[notificationIndex].results[notificationIndexInPage] as any)[key] = (
-        value as any
-      )[key];
+      (previousNotifications[notificationIndex].results[notificationIndexInPage] as any)[key] = (value as any)[key];
 
       return previousNotifications;
     }, false);
@@ -147,8 +128,7 @@ const useUserNotification = () => {
 
       if (notificationIndexInPage === -1) return previousNotifications;
 
-      notificationIndexInPage =
-        notificationIndexInPage === -1 ? 0 : notificationIndexInPage % PER_PAGE;
+      notificationIndexInPage = notificationIndexInPage === -1 ? 0 : notificationIndexInPage % PER_PAGE;
 
       if (notificationIndex === -1) return previousNotifications;
 
@@ -163,8 +143,7 @@ const useUserNotification = () => {
   const markNotificationReadStatus = async (notificationId: string) => {
     if (!workspaceSlug) return;
 
-    const isRead =
-      notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
+    const isRead = notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
 
     handleReadMutation(isRead ? "unread" : "read");
     mutateNotification(notificationId, { read_at: isRead ? null : new Date() });
@@ -193,28 +172,23 @@ const useUserNotification = () => {
   const markNotificationAsRead = async (notificationId: string) => {
     if (!workspaceSlug) return;
 
-    const isRead =
-      notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
+    const isRead = notifications?.find((notification) => notification.id === notificationId)?.read_at !== null;
 
     if (isRead) return;
 
     mutateNotification(notificationId, { read_at: new Date() });
     handleReadMutation("read");
 
-    await userNotificationServices
-      .markUserNotificationAsRead(workspaceSlug.toString(), notificationId)
-      .catch(() => {
-        throw new Error("Something went wrong");
-      });
+    await userNotificationServices.markUserNotificationAsRead(workspaceSlug.toString(), notificationId).catch(() => {
+      throw new Error("Something went wrong");
+    });
 
     mutateNotificationCount();
   };
 
   const markNotificationArchivedStatus = async (notificationId: string) => {
     if (!workspaceSlug) return;
-    const isArchived =
-      notifications?.find((notification) => notification.id === notificationId)?.archived_at !==
-      null;
+    const isArchived = notifications?.find((notification) => notification.id === notificationId)?.archived_at !== null;
 
     if (!isArchived) {
       handleReadMutation("read");
@@ -251,9 +225,7 @@ const useUserNotification = () => {
   const markSnoozeNotification = async (notificationId: string, dateTime?: Date) => {
     if (!workspaceSlug) return;
 
-    const isSnoozed =
-      notifications?.find((notification) => notification.id === notificationId)?.snoozed_till !==
-      null;
+    const isSnoozed = notifications?.find((notification) => notification.id === notificationId)?.snoozed_till !== null;
 
     mutateNotification(notificationId, { snoozed_till: isSnoozed ? null : dateTime });
 
@@ -320,9 +292,7 @@ const useUserNotification = () => {
     selectedTab,
     setSelectedTab,
     totalNotificationCount: notificationCount
-      ? notificationCount.created_issues +
-        notificationCount.watching_issues +
-        notificationCount.my_issues
+      ? notificationCount.created_issues + notificationCount.watching_issues + notificationCount.my_issues
       : null,
     notificationCount,
     mutateNotificationCount,
diff --git a/web/hooks/use-user.tsx b/web/hooks/use-user.tsx
index f9b6e36d8..97518fed6 100644
--- a/web/hooks/use-user.tsx
+++ b/web/hooks/use-user.tsx
@@ -2,20 +2,19 @@ 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 { IUser } from "types";
+
+// services
+const userService = new UserService();
 
 export default function useUser({ redirectTo = "", redirectIfFound = false, options = {} } = {}) {
   const router = useRouter();
   // API to fetch user information
-  const { data, isLoading, error, mutate } = useSWR<ICurrentUserResponse>(
-    CURRENT_USER,
-    () => userService.currentUser(),
-    options
-  );
+  const { data, isLoading, error, mutate } = useSWR<IUser>(CURRENT_USER, () => userService.currentUser(), options);
 
   const user = error ? undefined : data;
 
@@ -48,7 +47,7 @@ export default function useUser({ redirectTo = "", redirectIfFound = false, opti
     isUserLoading: isLoading,
     mutateUser: mutate,
     userError: error,
-    assignedIssuesLength: user?.assigned_issues ?? 0,
-    workspaceInvitesLength: user?.workspace_invites ?? 0,
+    // assignedIssuesLength: user?.assigned_issues ?? 0,
+    // workspaceInvitesLength: user?.workspace_invites ?? 0,
   };
 }
diff --git a/web/hooks/use-workspace-details.tsx b/web/hooks/use-workspace-details.tsx
index 4a2f97626..e0eaa3fe5 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 d4104d3bd..e6fa6d2e3 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-workspace-view.tsx b/web/hooks/use-workspace-view.tsx
deleted file mode 100644
index e183bc633..000000000
--- a/web/hooks/use-workspace-view.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { useContext } from "react";
-// types
-import { IWorkspaceViewContext, WorkspaceIssueViewContext } from "contexts/workspace-view-context";
-
-export const useWorkspaceView = (): IWorkspaceViewContext => {
-  const context = useContext(WorkspaceIssueViewContext);
-
-  if (!context) throw new Error("useWorkspaceView must be used within a WorkspaceIssueViewContext");
-
-  return context;
-};
diff --git a/web/hooks/use-workspaces.tsx b/web/hooks/use-workspaces.tsx
index d924d0f69..7637ccffe 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/app-layout/app-header.tsx b/web/layouts/app-layout-legacy/app-header.tsx
similarity index 84%
rename from web/layouts/app-layout/app-header.tsx
rename to web/layouts/app-layout-legacy/app-header.tsx
index 27c52f654..c37b3908c 100644
--- a/web/layouts/app-layout/app-header.tsx
+++ b/web/layouts/app-layout-legacy/app-header.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 // icons
 import { Bars3Icon } from "@heroicons/react/24/outline";
 // ui components
-import { Tooltip } from "components/ui";
+import { Tooltip } from "@plane/ui";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 
@@ -17,10 +17,10 @@ type Props = {
 };
 
 const { NEXT_PUBLIC_DEPLOY_URL } = process.env;
-let plane_deploy_url = NEXT_PUBLIC_DEPLOY_URL
+let plane_deploy_url = NEXT_PUBLIC_DEPLOY_URL;
 
-if (typeof window !== 'undefined' && !plane_deploy_url) {
-  plane_deploy_url= window.location.protocol + "//" + window.location.host + "/spaces";
+if (typeof window !== "undefined" && !plane_deploy_url) {
+  plane_deploy_url = window.location.protocol + "//" + window.location.host + "/spaces";
 }
 
 const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, noHeader }) => {
@@ -50,15 +50,10 @@ const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, n
         {projectDetails && projectDetails?.is_deployed && (
           <Link href={`${plane_deploy_url}/${workspaceSlug}/${projectId}`}>
             <a target="_blank" rel="noreferrer">
-              <Tooltip
-                tooltipContent="This project is public, and live on web."
-                position="bottom-left"
-              >
+              <Tooltip tooltipContent="This project is public, and live on web." position="bottom-left">
                 <div className="transition-all flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 p-1 rounded overflow-hidden relative flex items-center gap-1 cursor-pointer group">
                   <div className="w-[14px] h-[14px] flex justify-center items-center">
-                    <span className="material-symbols-rounded text-[14px]">
-                      radio_button_checked
-                    </span>
+                    <span className="material-symbols-rounded text-[14px]">radio_button_checked</span>
                   </div>
                   <div className="text-xs font-medium">Public</div>
                   <div className="w-[14px] h-[14px] hidden group-hover:flex justify-center items-center">
diff --git a/web/layouts/app-layout/app-sidebar.tsx b/web/layouts/app-layout-legacy/app-sidebar.tsx
similarity index 62%
rename from web/layouts/app-layout/app-sidebar.tsx
rename to web/layouts/app-layout-legacy/app-sidebar.tsx
index 19878458a..479a047f6 100644
--- a/web/layouts/app-layout/app-sidebar.tsx
+++ b/web/layouts/app-layout-legacy/app-sidebar.tsx
@@ -2,29 +2,19 @@ import dynamic from "next/dynamic";
 // hooks
 import useTheme from "hooks/use-theme";
 // components
-import {
-  WorkspaceHelpSection,
-  WorkspaceSidebarDropdown,
-  WorkspaceSidebarMenu,
-} from "components/workspace";
+import { WorkspaceHelpSection, WorkspaceSidebarDropdown, WorkspaceSidebarMenu } from "components/workspace";
 
 const WorkspaceSidebarQuickAction = dynamic<{}>(
-  () =>
-    import("components/workspace/sidebar-quick-action").then(
-      (mod) => mod.WorkspaceSidebarQuickAction
-    ),
+  () => import("components/workspace/sidebar-quick-action").then((mod) => mod.WorkspaceSidebarQuickAction),
   {
     ssr: false,
   }
 );
 
 import { ProjectSidebarList } from "components/project";
-import { PublishProjectModal } from "components/project/publish-project/modal";
-import { ConfirmProjectLeaveModal } from "components/project/confirm-project-leave-modal";
-// mobx react lite
-import { observer } from "mobx-react-lite";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
 
 export interface SidebarProps {
   toggleSidebar: boolean;
@@ -32,15 +22,13 @@ export interface SidebarProps {
 }
 
 const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSidebar }) => {
-  const store: any = useMobxStore();
-  // theme
-  const { collapsed: sidebarCollapse } = useTheme();
+  const { theme: themeStore } = useMobxStore();
 
   return (
     <div
       id="app-sidebar"
       className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
-        store?.theme?.sidebarCollapsed ? "" : "md:w-[280px]"
+        themeStore?.sidebarCollapsed ? "" : "md:w-[280px]"
       } ${toggleSidebar ? "left-0" : "-left-full md:left-0"}`}
     >
       <div className="flex h-full w-full flex-1 flex-col">
@@ -50,10 +38,6 @@ const Sidebar: React.FC<SidebarProps> = observer(({ toggleSidebar, setToggleSide
         <ProjectSidebarList />
         <WorkspaceHelpSection setSidebarActive={setToggleSidebar} />
       </div>
-      {/* publish project modal */}
-      <PublishProjectModal />
-      {/* project leave modal */}
-      <ConfirmProjectLeaveModal />
     </div>
   );
 });
diff --git a/web/layouts/app-layout-legacy/layout.tsx b/web/layouts/app-layout-legacy/layout.tsx
new file mode 100644
index 000000000..90eef899c
--- /dev/null
+++ b/web/layouts/app-layout-legacy/layout.tsx
@@ -0,0 +1 @@
+export const AppLayoutLegacy = () => <></>;
diff --git a/web/layouts/app-layout/index.ts b/web/layouts/app-layout/index.ts
new file mode 100644
index 000000000..c4bfd4db3
--- /dev/null
+++ b/web/layouts/app-layout/index.ts
@@ -0,0 +1,2 @@
+export * from "./layout";
+export * from "./sidebar";
diff --git a/web/layouts/app-layout/layout.tsx b/web/layouts/app-layout/layout.tsx
new file mode 100644
index 000000000..cef680116
--- /dev/null
+++ b/web/layouts/app-layout/layout.tsx
@@ -0,0 +1,35 @@
+import { FC, ReactNode } from "react";
+// layouts
+import { UserAuthWrapper, WorkspaceAuthWrapper } from "layouts/auth-layout";
+// components
+import { CommandPalette } from "components/command-palette";
+import { AppSidebar } from "./sidebar";
+
+export interface IAppLayout {
+  children: ReactNode;
+  header: ReactNode;
+}
+
+export const AppLayout: FC<IAppLayout> = (props) => {
+  const { children, header } = props;
+
+  return (
+    <>
+      {/* <CommandPalette /> */}
+      <UserAuthWrapper>
+        <WorkspaceAuthWrapper>
+          <div className="relative flex h-screen w-full overflow-hidden">
+            <AppSidebar />
+            <main className="relative flex flex-col h-full w-full overflow-hidden bg-custom-background-100">
+              {/* <div className="relative w-full">{header}</div> */}
+              {header}
+              <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>
+        </WorkspaceAuthWrapper>
+      </UserAuthWrapper>
+    </>
+  );
+};
diff --git a/web/layouts/app-layout/sidebar.tsx b/web/layouts/app-layout/sidebar.tsx
new file mode 100644
index 000000000..b5e804fdb
--- /dev/null
+++ b/web/layouts/app-layout/sidebar.tsx
@@ -0,0 +1,36 @@
+import { FC } from "react";
+import { observer } from "mobx-react-lite";
+// components
+import {
+  WorkspaceHelpSection,
+  WorkspaceSidebarDropdown,
+  WorkspaceSidebarMenu,
+  WorkspaceSidebarQuickAction,
+} from "components/workspace";
+import { ProjectSidebarList } from "components/project";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IAppSidebar {}
+
+export const AppSidebar: FC<IAppSidebar> = observer(() => {
+  // store
+  const { theme: themStore } = useMobxStore();
+
+  return (
+    <div
+      id="app-sidebar"
+      className={`fixed md:relative inset-y-0 flex flex-col bg-custom-sidebar-background-100 h-full flex-shrink-0 flex-grow-0 border-r border-custom-sidebar-border-200 z-20 duration-300 ${
+        themStore?.sidebarCollapsed ? "" : "md:w-[280px]"
+      } ${themStore?.sidebarCollapsed ? "left-0" : "-left-full md:left-0"}`}
+    >
+      <div className="flex h-full w-full flex-1 flex-col">
+        <WorkspaceSidebarDropdown />
+        <WorkspaceSidebarQuickAction />
+        <WorkspaceSidebarMenu />
+        <ProjectSidebarList />
+        <WorkspaceHelpSection />
+      </div>
+    </div>
+  );
+});
diff --git a/web/layouts/auth-layout-legacy/index.ts b/web/layouts/auth-layout-legacy/index.ts
new file mode 100644
index 000000000..608e96606
--- /dev/null
+++ b/web/layouts/auth-layout-legacy/index.ts
@@ -0,0 +1,3 @@
+export * from "./project-authorization-wrapper";
+export * from "./workspace-authorization-wrapper";
+export * from "./user-authorization-wrapper";
diff --git a/web/layouts/auth-layout/project-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
similarity index 86%
rename from web/layouts/auth-layout/project-authorization-wrapper.tsx
rename to web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
index 386883736..cb2abc56f 100644
--- a/web/layouts/auth-layout/project-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/project-authorization-wrapper.tsx
@@ -5,15 +5,15 @@ 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/app-header";
-import AppSidebar from "layouts/app-layout/app-sidebar";
+import AppHeader from "layouts/app-layout-legacy/app-header";
+import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
 // components
 import { NotAuthorizedView, JoinProject } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
 // ui
-import { EmptyState, PrimaryButton, Spinner } from "components/ui";
+import { Button, Spinner } from "@plane/ui";
+import { EmptyState } from "components/common";
 // icons
 import { LayerDiagonalIcon } from "components/icons";
 // images
@@ -30,9 +30,7 @@ type Props = {
 
 export const ProjectAuthorizationWrapper: React.FC<Props> = (props) => (
   <ProjectMemberProvider>
-    <WorkspaceViewProvider>
-      <ProjectAuthorizationWrapped {...props} />
-    </WorkspaceViewProvider>
+    <ProjectAuthorizationWrapped {...props} />
   </ProjectMemberProvider>
 );
 
@@ -90,9 +88,9 @@ const ProjectAuthorizationWrapped: React.FC<Props> = ({
             actionButton={
               <Link href={`/${workspaceSlug}/projects/${projectId}/issues`}>
                 <a>
-                  <PrimaryButton className="flex items-center gap-1">
-                    <LayerDiagonalIcon height={16} width={16} color="white" /> Go to issues
-                  </PrimaryButton>
+                  <Button variant="primary" prependIcon={<LayerDiagonalIcon color="white" />}>
+                    Go to issues
+                  </Button>
                 </a>
               </Link>
             }
diff --git a/web/layouts/auth-layout/user-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx
similarity index 83%
rename from web/layouts/auth-layout/user-authorization-wrapper.tsx
rename to web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx
index f48403b0f..33e414e28 100644
--- a/web/layouts/auth-layout/user-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/user-authorization-wrapper.tsx
@@ -3,9 +3,9 @@ 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 "components/ui";
+import { Spinner } from "@plane/ui";
 // fetch-keys
 import { CURRENT_USER } from "constants/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();
 
@@ -22,7 +25,6 @@ export const UserAuthorizationLayout: React.FC<Props> = ({ children }) => {
     return (
       <div className="h-screen grid place-items-center p-4">
         <div className="flex flex-col items-center gap-3 text-center">
-          <h3 className="text-xl">Loading your profile...</h3>
           <Spinner />
         </div>
       </div>
diff --git a/web/layouts/auth-layout/workspace-authorization-wrapper.tsx b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
similarity index 52%
rename from web/layouts/auth-layout/workspace-authorization-wrapper.tsx
rename to web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
index c8088a731..9a443c136 100644
--- a/web/layouts/auth-layout/workspace-authorization-wrapper.tsx
+++ b/web/layouts/auth-layout-legacy/workspace-authorization-wrapper.tsx
@@ -1,24 +1,20 @@
 import { useState } from "react";
-
 import Link from "next/link";
 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/app-sidebar";
-import AppHeader from "layouts/app-layout/app-header";
+import AppSidebar from "layouts/app-layout-legacy/app-sidebar";
+import AppHeader from "layouts/app-layout-legacy/app-header";
 import { UserAuthorizationLayout } from "./user-authorization-wrapper";
 // components
+import { Button, Spinner } from "@plane/ui";
 import { NotAuthorizedView, NotAWorkspaceMember } from "components/auth-screens";
 import { CommandPalette } from "components/command-palette";
 // icons
-import { PrimaryButton, Spinner } from "components/ui";
 import { LayerDiagonalIcon } from "components/icons";
 // fetch-keys
 import { WORKSPACE_MEMBERS_ME } from "constants/fetch-keys";
@@ -32,6 +28,8 @@ type Props = {
   right?: JSX.Element;
 };
 
+const workspaceService = new WorkspaceService();
+
 export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
   children,
   noHeader = false,
@@ -47,7 +45,7 @@ export const WorkspaceAuthorizationLayout: React.FC<Props> = ({
 
   const { data: workspaceMemberMe, error } = useSWR(
     workspaceSlug ? WORKSPACE_MEMBERS_ME(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceServices.workspaceMemberMe(workspaceSlug.toString()) : null
+    workspaceSlug ? () => workspaceService.workspaceMemberMe(workspaceSlug.toString()) : null
   );
 
   if (!workspaceMemberMe && !error)
@@ -82,49 +80,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>
+                    <Button className="flex items-center gap-1">
+                      <LayerDiagonalIcon height={16} width={16} color="white" /> Go to workspace
+                    </Button>
+                  </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/index.ts b/web/layouts/auth-layout/index.ts
index 6790a6b16..9f8f435fe 100644
--- a/web/layouts/auth-layout/index.ts
+++ b/web/layouts/auth-layout/index.ts
@@ -1,2 +1,2 @@
-export * from "./project-authorization-wrapper";
-export * from "./workspace-authorization-wrapper";
+export * from "./user-wrapper";
+export * from "./workspace-wrapper";
diff --git a/web/layouts/auth-layout/user-wrapper.tsx b/web/layouts/auth-layout/user-wrapper.tsx
new file mode 100644
index 000000000..c3d29aeb5
--- /dev/null
+++ b/web/layouts/auth-layout/user-wrapper.tsx
@@ -0,0 +1,42 @@
+import { FC, ReactNode } from "react";
+import { useRouter } from "next/router";
+import useSWR from "swr";
+// services
+import { UserService } from "services/user.service";
+// ui
+import { Spinner } from "@plane/ui";
+// fetch-keys
+import { CURRENT_USER } from "constants/fetch-keys";
+
+export interface IUserAuthWrapper {
+  children: ReactNode;
+}
+
+// services
+const userService = new UserService();
+
+export const UserAuthWrapper: FC<IUserAuthWrapper> = (props) => {
+  const { children } = props;
+  // router
+  const router = useRouter();
+  // fetching user information
+  const { data: currentUser, error } = useSWR(CURRENT_USER, () => userService.currentUser());
+
+  if (!currentUser && !error) {
+    return (
+      <div className="h-screen grid place-items-center p-4">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    const redirectTo = router.asPath;
+    router.push(`/?next=${redirectTo}`);
+    return null;
+  }
+
+  return <>{children}</>;
+};
diff --git a/web/layouts/auth-layout/workspace-wrapper.tsx b/web/layouts/auth-layout/workspace-wrapper.tsx
new file mode 100644
index 000000000..bc120dd21
--- /dev/null
+++ b/web/layouts/auth-layout/workspace-wrapper.tsx
@@ -0,0 +1,94 @@
+import { FC, ReactNode } from "react";
+import { useRouter } from "next/router";
+import Link from "next/link";
+import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+// icons
+import { Spinner, PrimaryButton, SecondaryButton } from "components/ui";
+// hooks
+import { useMobxStore } from "lib/mobx/store-provider";
+
+export interface IWorkspaceAuthWrapper {
+  children: ReactNode;
+  noHeader?: boolean;
+  bg?: "primary" | "secondary";
+  breadcrumbs?: JSX.Element;
+  left?: JSX.Element;
+  right?: JSX.Element;
+}
+
+export const WorkspaceAuthWrapper: FC<IWorkspaceAuthWrapper> = observer((props) => {
+  const { children } = props;
+  // store
+  const { user: userStore, project: projectStore, workspace: workspaceStore } = useMobxStore();
+  // router
+  const router = useRouter();
+  const { workspaceSlug } = router.query;
+  // fetching user workspace information
+  useSWR(
+    workspaceSlug ? `WORKSPACE_MEMBERS_ME_${workspaceSlug}` : null,
+    workspaceSlug ? () => userStore.fetchUserWorkspaceInfo(workspaceSlug.toString()) : null
+  );
+  // fetching workspace projects
+  useSWR(
+    workspaceSlug ? `WORKSPACE_PROJECTS_${workspaceSlug}` : null,
+    workspaceSlug ? () => projectStore.fetchProjects(workspaceSlug.toString()) : null
+  );
+  // fetch workspace members
+  useSWR(
+    workspaceSlug ? `WORKSPACE_MEMBERS_${workspaceSlug}` : null,
+    workspaceSlug ? () => workspaceStore.fetchWorkspaceMembers(workspaceSlug.toString()) : null
+  );
+  // fetch workspace labels
+  useSWR(
+    workspaceSlug ? `WORKSPACE_LABELS_${workspaceSlug}` : null,
+    workspaceSlug ? () => workspaceStore.fetchWorkspaceLabels(workspaceSlug.toString()) : null
+  );
+
+  // console.log("workspaceSlug", workspaceSlug);
+
+  // console.log("userStore.memberInfo", userStore.memberInfo);
+
+  // while data is being loaded
+  if (!userStore.memberInfo && userStore.hasPermissionToWorkspace === null) {
+    return (
+      <div className="grid h-screen place-items-center p-4 bg-custom-background-100">
+        <div className="flex flex-col items-center gap-3 text-center">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+  // while user does not have access to view that workspace
+  if (userStore.hasPermissionToWorkspace !== null && userStore.hasPermissionToWorkspace === false) {
+    return (
+      <div className={`h-screen w-full overflow-hidden bg-custom-background-100`}>
+        <div className="grid h-full place-items-center p-4">
+          <div className="space-y-8 text-center">
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold">Not Authorized!</h3>
+              <p className="mx-auto w-1/2 text-sm text-custom-text-200">
+                You{"'"}re not a member of this workspace. Please contact the workspace admin to get an invitation or
+                check your pending invitations.
+              </p>
+            </div>
+            <div className="flex items-center justify-center gap-2">
+              <Link href="/invitations">
+                <a>
+                  <SecondaryButton>Check pending invites</SecondaryButton>
+                </a>
+              </Link>
+              <Link href="/create-workspace">
+                <a>
+                  <PrimaryButton>Create new workspace</PrimaryButton>
+                </a>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+});
diff --git a/web/layouts/profile-layout.tsx b/web/layouts/profile-layout.tsx
index 46ac24d8e..b0be98495 100644
--- a/web/layouts/profile-layout.tsx
+++ b/web/layouts/profile-layout.tsx
@@ -1,7 +1,7 @@
 // hooks
 import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import { ProfileNavbar, ProfileSidebar } from "components/profile";
 // ui
diff --git a/web/layouts/web-view-layout/index.tsx b/web/layouts/web-view-layout/index.tsx
index bec3798d7..f50c23512 100644
--- a/web/layouts/web-view-layout/index.tsx
+++ b/web/layouts/web-view-layout/index.tsx
@@ -1,23 +1,22 @@
-// 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 "components/web-view";
+import { Spinner } from "@plane/ui";
 
 type Props = {
   children: React.ReactNode;
   fullScreen?: boolean;
 };
 
+// services
+const userService = new UserService();
+
 const getIfInWebview = (userAgent: NavigatorID["userAgent"]) => {
   const safari = /safari/.test(userAgent);
 
diff --git a/web/lib/mobx/store-init.tsx b/web/lib/mobx/store-init.tsx
index 771d8eaba..bc480f4d2 100644
--- a/web/lib/mobx/store-init.tsx
+++ b/web/lib/mobx/store-init.tsx
@@ -3,19 +3,28 @@ import { useEffect } from "react";
 import { useTheme } from "next-themes";
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
+import { useRouter } from "next/router";
 
 const MobxStoreInit = () => {
-  const store: any = useMobxStore();
+  const {
+    theme: themeStore,
+    user: userStore,
+    workspace: workspaceStore,
+    project: projectStore,
+    module: moduleStore,
+    globalViews: globalViewsStore,
+    projectViews: projectViewsStore,
+  } = useMobxStore();
+  // theme
   const { setTheme } = useTheme();
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId, moduleId, globalViewId, viewId } = router.query;
 
   useEffect(() => {
     // sidebar collapsed toggle
-    if (
-      localStorage &&
-      localStorage.getItem("app_sidebar_collapsed") &&
-      store?.theme?.sidebarCollapsed === null
-    )
-      store.theme.setSidebarCollapsed(
+    if (localStorage && localStorage.getItem("app_sidebar_collapsed") && themeStore?.sidebarCollapsed === null)
+      themeStore.setSidebarCollapsed(
         localStorage.getItem("app_sidebar_collapsed")
           ? localStorage.getItem("app_sidebar_collapsed") === "true"
             ? true
@@ -24,28 +33,36 @@ const MobxStoreInit = () => {
       );
 
     // theme
-    if (
-      (store.theme.theme === null || store.theme.theme === "undefined") &&
-      store?.user?.currentUserSettings
-    ) {
+    if (themeStore.theme === null && userStore?.currentUserSettings) {
       let currentTheme = localStorage.getItem("theme");
       currentTheme = currentTheme && currentTheme != "undefined" ? currentTheme : "system";
 
       // validating the theme and applying for initial state
       if (currentTheme) {
         setTheme(currentTheme);
-        store.theme.setTheme({ theme: { theme: currentTheme } });
+        themeStore.setTheme({ theme: { theme: currentTheme } });
       }
     }
-  }, [store?.theme, store?.user, setTheme]);
+  }, [themeStore, userStore, setTheme]);
 
   useEffect(() => {
-    // current user
-    if (store?.user?.currentUser === null) store.user.setCurrentUser();
-
-    // current user settings
-    if (store?.user?.currentUserSettings === null) store.user.setCurrentUserSettings();
-  }, [store?.user]);
+    if (workspaceSlug) workspaceStore.setWorkspaceSlug(workspaceSlug.toString());
+    if (projectId) projectStore.setProjectId(projectId.toString());
+    if (moduleId) moduleStore.setModuleId(moduleId.toString());
+    if (globalViewId) globalViewsStore.setGlobalViewId(globalViewId.toString());
+    if (viewId) projectViewsStore.setViewId(viewId.toString());
+  }, [
+    workspaceSlug,
+    projectId,
+    moduleId,
+    globalViewId,
+    viewId,
+    workspaceStore,
+    projectStore,
+    moduleStore,
+    globalViewsStore,
+    projectViewsStore,
+  ]);
 
   return <></>;
 };
diff --git a/web/package.json b/web/package.json
index 624bf019e..26add4135 100644
--- a/web/package.json
+++ b/web/package.json
@@ -15,6 +15,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@headlessui/react": "^1.7.3",
+    "@hello-pangea/dnd": "^16.3.0",
     "@heroicons/react": "^2.0.12",
     "@jitsu/nextjs": "^3.1.5",
     "@mui/icons-material": "^5.14.1",
@@ -26,6 +27,7 @@
     "@nivo/line": "0.80.0",
     "@nivo/pie": "0.80.0",
     "@nivo/scatterplot": "0.80.0",
+    "@plane/ui": "*",
     "@popperjs/core": "^2.11.8",
     "@sentry/nextjs": "^7.36.0",
     "@plane/lite-text-editor": "*",
@@ -40,7 +42,7 @@
     "js-cookie": "^3.0.1",
     "lodash.debounce": "^4.0.8",
     "lowlight": "^2.9.0",
-    "lucide-react": "^0.269.0",
+    "lucide-react": "^0.274.0",
     "mobx": "^6.10.0",
     "mobx-react-lite": "^4.0.3",
     "next": "12.3.2",
diff --git a/web/pages/404.tsx b/web/pages/404.tsx
index 6386093a7..e5f5ee7fd 100644
--- a/web/pages/404.tsx
+++ b/web/pages/404.tsx
@@ -6,7 +6,7 @@ import Image from "next/image";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 // images
 import Image404 from "public/404.svg";
 // types
@@ -22,13 +22,15 @@ const PageNotFound: NextPage = () => (
         <div className="space-y-2">
           <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
           <p className="text-sm text-custom-text-200">
-            Sorry, the page you are looking for cannot be found. It may have been removed, had its
-            name changed, or is temporarily unavailable.
+            Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
+            temporarily unavailable.
           </p>
         </div>
         <Link href="/">
           <a className="block">
-            <SecondaryButton size="md">Go to Home</SecondaryButton>
+            <Button variant="neutral-primary" size="md">
+              Go to Home
+            </Button>
           </a>
         </Link>
       </div>
diff --git a/web/pages/[workspaceSlug]/analytics.tsx b/web/pages/[workspaceSlug]/analytics.tsx
index 945b27c4e..ff991988c 100644
--- a/web/pages/[workspaceSlug]/analytics.tsx
+++ b/web/pages/[workspaceSlug]/analytics.tsx
@@ -1,83 +1,54 @@
 import React, { Fragment, useEffect } from "react";
-
 import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// react-hook-form
-import { useForm } from "react-hook-form";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-import useProjects from "hooks/use-projects";
-// headless ui
+import { observer } from "mobx-react-lite";
 import { Tab } from "@headlessui/react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import analyticsService from "services/analytics.service";
-import trackEventServices from "services/track-event.service";
+import { TrackEventService } from "services/track_event.service";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
 // components
 import { CustomAnalytics, ScopeAndDemand } from "components/analytics";
-// ui
-import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import { EmptyState } from "components/ui";
+import { WorkspaceAnalyticsHeader } from "components/headers";
+import { EmptyState } from "components/common";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
-// images
+// assets
 import emptyAnalytics from "public/empty-state/analytics.svg";
-// types
-import { IAnalyticsParams } from "types";
-// fetch-keys
-import { ANALYTICS } from "constants/fetch-keys";
+// constants
+import { ANALYTICS_TABS } from "constants/analytics";
 
-const defaultValues: IAnalyticsParams = {
-  x_axis: "priority",
-  y_axis: "issue_count",
-  segment: null,
-  project: null,
-};
+const trackEventService = new TrackEventService();
 
-const tabsList = ["Scope and Demand", "Custom Analytics"];
-
-const Analytics = () => {
+const AnalyticsPage = observer(() => {
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
+  // store
+  const { project: projectStore, user: userStore } = useMobxStore();
 
-  const { user } = useUserAuth();
-  const { projects } = useProjects();
-
-  const { control, watch, setValue } = useForm<IAnalyticsParams>({ defaultValues });
-
-  const params: IAnalyticsParams = {
-    x_axis: watch("x_axis"),
-    y_axis: watch("y_axis"),
-    segment: watch("segment"),
-    project: watch("project"),
-  };
-
-  const { data: analytics, error: analyticsError } = useSWR(
-    workspaceSlug ? ANALYTICS(workspaceSlug.toString(), params) : null,
-    workspaceSlug ? () => analyticsService.getAnalytics(workspaceSlug.toString(), params) : null
-  );
+  const user = userStore.currentUser;
+  const projects = workspaceSlug ? projectStore.projects[workspaceSlug?.toString()] : null;
 
   const trackAnalyticsEvent = (tab: string) => {
+    if (!user) return;
+
     const eventPayload = {
       workspaceSlug: workspaceSlug?.toString(),
     };
 
     const eventType =
-      tab === "Scope and Demand"
-        ? "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS"
-        : "WORKSPACE_CUSTOM_ANALYTICS";
+      tab === "scope_and_demand" ? "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS" : "WORKSPACE_CUSTOM_ANALYTICS";
 
-    trackEventServices.trackAnalyticsEvent(eventPayload, eventType, user);
+    trackEventService.trackAnalyticsEvent(eventPayload, eventType, user);
   };
 
   useEffect(() => {
     if (!workspaceSlug) return;
 
     if (user && workspaceSlug)
-      trackEventServices.trackAnalyticsEvent(
+      trackEventService.trackAnalyticsEvent(
         { workspaceSlug: workspaceSlug?.toString() },
         "WORKSPACE_SCOPE_AND_DEMAND_ANALYTICS",
         user
@@ -85,29 +56,23 @@ const Analytics = () => {
   }, [user, workspaceSlug]);
 
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem title="Workspace Analytics" />
-        </Breadcrumbs>
-      }
-    >
-      {projects ? (
-        projects.length > 0 ? (
+    <AppLayout header={<WorkspaceAnalyticsHeader />}>
+      <>
+        {projects && projects.length > 0 ? (
           <div className="h-full flex flex-col overflow-hidden bg-custom-background-100">
             <Tab.Group as={Fragment}>
               <Tab.List as="div" className="space-x-2 border-b border-custom-border-200 px-5 py-3">
-                {tabsList.map((tab) => (
+                {ANALYTICS_TABS.map((tab) => (
                   <Tab
-                    key={tab}
+                    key={tab.key}
                     className={({ selected }) =>
                       `rounded-3xl border border-custom-border-200 px-4 py-2 text-xs hover:bg-custom-background-80 ${
                         selected ? "bg-custom-background-80" : ""
                       }`
                     }
-                    onClick={() => trackAnalyticsEvent(tab)}
+                    onClick={() => trackAnalyticsEvent(tab.key)}
                   >
-                    {tab}
+                    {tab.title}
                   </Tab>
                 ))}
               </Tab.List>
@@ -116,39 +81,33 @@ const Analytics = () => {
                   <ScopeAndDemand fullScreen />
                 </Tab.Panel>
                 <Tab.Panel as={Fragment}>
-                  <CustomAnalytics
-                    analytics={analytics}
-                    analyticsError={analyticsError}
-                    params={params}
-                    control={control}
-                    setValue={setValue}
-                    user={user}
-                    fullScreen
-                  />
+                  <CustomAnalytics fullScreen />
                 </Tab.Panel>
               </Tab.Panels>
             </Tab.Group>
           </div>
         ) : (
-          <EmptyState
-            title="You can see your all projects' analytics here"
-            description="Let's create your first project and analyse the stats with various graphs."
-            image={emptyAnalytics}
-            primaryButton={{
-              icon: <PlusIcon className="h-4 w-4" />,
-              text: "New Project",
-              onClick: () => {
-                const e = new KeyboardEvent("keydown", {
-                  key: "p",
-                });
-                document.dispatchEvent(e);
-              },
-            }}
-          />
-        )
-      ) : null}
-    </WorkspaceAuthorizationLayout>
+          <>
+            <EmptyState
+              title="You can see your all projects' analytics here"
+              description="Let's create your first project and analyze the stats with various graphs."
+              image={emptyAnalytics}
+              primaryButton={{
+                icon: <PlusIcon className="h-4 w-4" />,
+                text: "New Project",
+                onClick: () => {
+                  const e = new KeyboardEvent("keydown", {
+                    key: "p",
+                  });
+                  document.dispatchEvent(e);
+                },
+              }}
+            />
+          </>
+        )}
+      </>
+    </AppLayout>
   );
-};
+});
 
-export default Analytics;
+export default AnalyticsPage;
diff --git a/web/pages/[workspaceSlug]/editor.tsx b/web/pages/[workspaceSlug]/editor.tsx
deleted file mode 100644
index 867520cc0..000000000
--- a/web/pages/[workspaceSlug]/editor.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { RichTextEditor } from "@plane/rich-text-editor";
-import type { NextPage } from "next";
-import { useCallback, useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-import issuesService from "services/issues.service";
-import { ICurrentUserResponse, IIssue } from "types";
-import useReloadConfirmations from "hooks/use-reload-confirmation";
-import { Spinner } from "components/ui";
-import Image404 from "public/404.svg";
-import DefaultLayout from "layouts/default-layout";
-import Image from "next/image";
-import userService from "services/user.service";
-import { useRouter } from "next/router";
-import fileService from "services/file.service";
-
-const Editor: NextPage = () => {
-  const [user, setUser] = useState<ICurrentUserResponse | undefined>();
-  const [isSubmitting, setIsSubmitting] = useState<"submitting" | "submitted" | "saved">("saved");
-  const [isLoading, setIsLoading] = useState("false");
-  const { setShowAlert } = useReloadConfirmations();
-  const [cookies, setCookies] = useState<any>({});
-  const [issueDetail, setIssueDetail] = useState<IIssue | null>(null);
-  const router = useRouter();
-  const { editable } = router.query;
-  const {
-    handleSubmit,
-    watch,
-    setValue,
-    control,
-    formState: { errors },
-  } = useForm<IIssue>({
-    defaultValues: {
-      name: "",
-      description: "",
-      description_html: "",
-    },
-  });
-
-  const getCookies = () => {
-    const cookies = document.cookie.split(";");
-    const cookieObj: any = {};
-    cookies.forEach((cookie) => {
-      const cookieArr = cookie.split("=");
-      cookieObj[cookieArr[0].trim()] = cookieArr[1];
-    });
-
-    setCookies(cookieObj);
-    return cookieObj;
-  };
-
-  const getIssueDetail = async (cookiesData: any) => {
-    try {
-      setIsLoading("true");
-      const userData = await userService.currentUser();
-      setUser(userData);
-      const issueDetail = await issuesService.retrieve(
-        cookiesData.MOBILE_slug,
-        cookiesData.MOBILE_project_id,
-        cookiesData.MOBILE_issue_id
-      );
-      setIssueDetail(issueDetail);
-      setIsLoading("false");
-      setValue("description_html", issueDetail.description_html);
-      setValue("description", issueDetail.description);
-    } catch (e) {
-      setIsLoading("error");
-      console.log(e);
-    }
-  };
-  useEffect(() => {
-    const cookiesData = getCookies();
-
-    getIssueDetail(cookiesData);
-  }, []);
-
-  useEffect(() => {
-    if (isSubmitting === "submitted") {
-      setShowAlert(false);
-      setTimeout(async () => {
-        setIsSubmitting("saved");
-      }, 2000);
-    } else if (isSubmitting === "submitting") {
-      setShowAlert(true);
-    }
-  }, [isSubmitting, setShowAlert]);
-
-  const submitChanges = async (
-    formData: Partial<IIssue>,
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ) => {
-    if (!workspaceSlug || !projectId || !issueId) return;
-
-    const payload: Partial<IIssue> = {
-      ...formData,
-    };
-
-    delete payload.issue_relations;
-    delete payload.related_issues;
-    await issuesService
-      .patchIssue(workspaceSlug as string, projectId as string, issueId as string, payload, user)
-      .catch((e) => {
-        console.log(e);
-      });
-  };
-
-  const handleDescriptionFormSubmit = useCallback(
-    async (formData: Partial<IIssue>) => {
-      if (!formData) return;
-
-      await submitChanges(
-        {
-          name: issueDetail?.name ?? "",
-          description: formData.description ?? "",
-          description_html: formData.description_html ?? "<p></p>",
-        },
-        cookies.MOBILE_slug,
-        cookies.MOBILE_project_id,
-        cookies.MOBILE_issue_id
-      );
-    },
-    [submitChanges]
-  );
-
-  return isLoading === "error" ? (
-    <ErrorEncountered />
-  ) : isLoading === "true" ? (
-    <div className="grid place-items-center h-screen w-full">
-      <Spinner />
-    </div>
-  ) : (
-    <div className="flex blur-none shadow-none backdrop:backdrop-blur-none  justify-center items-center">
-      <Controller
-        name="description_html"
-        control={control}
-        render={({ field: { value, onChange } }) => (
-          <RichTextEditor
-            uploadFile={fileService.getUploadFileFunction(cookies.MOBILE_slug ?? "")}
-            deleteFile={fileService.deleteImage}
-            borderOnFocus={false}
-            value={
-              !value ||
-              value === "" ||
-              (typeof value === "object" && Object.keys(value).length === 0)
-                ? watch("description_html")
-                : value
-            }
-            noBorder={true}
-            debouncedUpdatesEnabled={true}
-            setShouldShowAlert={setShowAlert}
-            setIsSubmitting={setIsSubmitting}
-            customClassName="min-h-[150px] shadow-sm"
-            editorContentCustomClassNames="pb-9"
-            onChange={(description: Object, description_html: string) => {
-              setShowAlert(true);
-              setIsSubmitting("submitting");
-              onChange(description_html);
-              setValue("description", description);
-              handleSubmit(handleDescriptionFormSubmit)().finally(() => {
-                setIsSubmitting("submitted");
-              });
-            }}
-          />
-        )}
-      />
-      <div
-        className={`absolute right-5 bottom-5 text-xs text-custom-text-200 border border-custom-border-400 rounded-xl w-[6.5rem] py-1 z-10 flex items-center justify-center ${
-          isSubmitting === "saved" ? "fadeOut" : "fadeIn"
-        }`}
-      >
-        {isSubmitting === "submitting" ? "Saving..." : "Saved"}
-      </div>
-    </div>
-  );
-};
-
-const ErrorEncountered: NextPage = () => (
-  <DefaultLayout>
-    <div className="grid max-h-fit place-items-center p-4">
-      <div className="space-y-8 text-center">
-        <div className="relative mx-auto h-40 w-40 lg:h-40 lg:w-40">
-          <Image src={Image404} layout="fill" alt="404- Page not found" />
-        </div>
-        <div className="space-y-2">
-          <h3 className="text-lg font-semibold">Oops! Something went wrong.</h3>
-        </div>
-      </div>
-    </div>
-  </DefaultLayout>
-);
-
-export default Editor;
diff --git a/web/pages/[workspaceSlug]/index.tsx b/web/pages/[workspaceSlug]/index.tsx
index a629f50a5..362cd5499 100644
--- a/web/pages/[workspaceSlug]/index.tsx
+++ b/web/pages/[workspaceSlug]/index.tsx
@@ -1,211 +1,14 @@
-import React, { useEffect, useState } from "react";
-
-import { useRouter } from "next/router";
-import Image from "next/image";
-import Link from "next/link";
-
-import useSWR, { mutate } from "swr";
-
-// next-themes
-import { useTheme } from "next-themes";
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-// services
-import userService from "services/user.service";
-// hooks
-import useUser from "hooks/use-user";
-import useProjects from "hooks/use-projects";
-// components
-import {
-  CompletedIssuesGraph,
-  IssuesList,
-  IssuesPieChart,
-  IssuesStats,
-} from "components/workspace";
-import { TourRoot } from "components/onboarding";
-// ui
-import { PrimaryButton, ProductUpdatesModal } from "components/ui";
-// icons
-import { BoltOutlined, GridViewOutlined } from "@mui/icons-material";
-// images
-import emptyDashboard from "public/empty-state/dashboard.svg";
-import githubBlackImage from "/public/logos/github-black.png";
-import githubWhiteImage from "/public/logos/github-white.png";
-// types
-import { ICurrentUserResponse } from "types";
 import type { NextPage } from "next";
-// fetch-keys
-import { CURRENT_USER, USER_WORKSPACE_DASHBOARD } from "constants/fetch-keys";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { WorkspaceDashboardView } from "components/views";
+import { WorkspaceDashboardHeader } from "components/headers/workspace-dashboard";
 
-const Greeting = ({ user }: { user: ICurrentUserResponse | undefined }) => {
-  const currentTime = new Date();
-
-  const hour = new Intl.DateTimeFormat("en-US", {
-    hour12: false,
-    hour: "numeric",
-  }).format(currentTime);
-
-  const date = new Intl.DateTimeFormat("en-US", {
-    month: "short",
-    day: "numeric",
-  }).format(currentTime);
-
-  const weekDay = new Intl.DateTimeFormat("en-US", {
-    weekday: "long",
-  }).format(currentTime);
-
-  const timeString = new Intl.DateTimeFormat("en-US", {
-    timeZone: user?.user_timezone,
-    hour12: false, // Use 24-hour format
-    hour: "2-digit",
-    minute: "2-digit",
-  }).format(currentTime);
-
-  const greeting =
-    parseInt(hour, 10) < 12 ? "morning" : parseInt(hour, 10) < 18 ? "afternoon" : "evening";
-
-  return (
-    <div>
-      <h3 className="text-2xl font-semibold">
-        Good {greeting}, {user?.first_name} {user?.last_name}
-      </h3>
-      <h6 className="text-custom-text-400 font-medium flex items-center gap-2">
-        <div>{greeting === "morning" ? "🌤️" : greeting === "afternoon" ? "🌥️" : "🌙️"}</div>
-        <div>
-          {weekDay}, {date} {timeString}
-        </div>
-      </h6>
-    </div>
-  );
-};
-
-const WorkspacePage: NextPage = () => {
-  const [month, setMonth] = useState(new Date().getMonth() + 1);
-  const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { theme } = useTheme();
-
-  const { user } = useUser();
-  const { projects } = useProjects();
-
-  const { data: workspaceDashboardData } = useSWR(
-    workspaceSlug ? USER_WORKSPACE_DASHBOARD(workspaceSlug as string) : null,
-    workspaceSlug ? () => userService.userWorkspaceDashboard(workspaceSlug as string, month) : null
-  );
-
-  useEffect(() => {
-    if (!workspaceSlug) return;
-
-    mutate(USER_WORKSPACE_DASHBOARD(workspaceSlug as string));
-  }, [month, workspaceSlug]);
-
-  return (
-    <WorkspaceAuthorizationLayout
-      left={
-        <div className="flex items-center gap-2 pl-3">
-          <GridViewOutlined fontSize="small" />
-          Dashboard
-        </div>
-      }
-      right={
-        <div className="flex items-center gap-3 px-3">
-          <button
-            onClick={() => setIsProductUpdatesModalOpen(true)}
-            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded"
-          >
-            <BoltOutlined fontSize="small" className="-my-1" />
-            What{"'"}s New?
-          </button>
-          <Link href="https://github.com/makeplane/plane" target="_blank" rel="noopener noreferrer">
-            <a className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded">
-              <Image
-                src={theme === "dark" ? githubWhiteImage : githubBlackImage}
-                height={16}
-                width={16}
-                alt="GitHub Logo"
-              />
-              Star us on GitHub
-            </a>
-          </Link>
-        </div>
-      }
-    >
-      {isProductUpdatesModalOpen && (
-        <ProductUpdatesModal
-          isOpen={isProductUpdatesModalOpen}
-          setIsOpen={setIsProductUpdatesModalOpen}
-        />
-      )}
-      {user && !user.is_tour_completed && (
-        <div className="fixed top-0 left-0 h-full w-full bg-custom-backdrop bg-opacity-50 transition-opacity z-20 grid place-items-center">
-          <TourRoot
-            onComplete={() => {
-              mutate<ICurrentUserResponse>(
-                CURRENT_USER,
-                (prevData) => {
-                  if (!prevData) return prevData;
-
-                  return {
-                    ...prevData,
-                    is_tour_completed: true,
-                  };
-                },
-                false
-              );
-
-              userService.updateUserTourCompleted(user).catch(() => mutate(CURRENT_USER));
-            }}
-          />
-        </div>
-      )}
-      <div className="p-8 space-y-8">
-        <Greeting user={user} />
-
-        {projects ? (
-          projects.length > 0 ? (
-            <div className="flex flex-col gap-8">
-              <IssuesStats data={workspaceDashboardData} />
-              <div className="grid grid-cols-1 gap-8 lg:grid-cols-2">
-                <IssuesList issues={workspaceDashboardData?.overdue_issues} type="overdue" />
-                <IssuesList issues={workspaceDashboardData?.upcoming_issues} type="upcoming" />
-                <IssuesPieChart groupedIssues={workspaceDashboardData?.state_distribution} />
-                <CompletedIssuesGraph
-                  issues={workspaceDashboardData?.completed_issues}
-                  month={month}
-                  setMonth={setMonth}
-                />
-              </div>
-            </div>
-          ) : (
-            <div className="bg-custom-primary-100/5 flex justify-between gap-5 md:gap-8">
-              <div className="p-5 md:p-8 pr-0">
-                <h5 className="text-xl font-semibold">Create a project</h5>
-                <p className="mt-2 mb-5">
-                  Manage your projects by creating issues, cycles, modules, views and pages.
-                </p>
-                <PrimaryButton
-                  onClick={() => {
-                    const e = new KeyboardEvent("keydown", {
-                      key: "p",
-                    });
-                    document.dispatchEvent(e);
-                  }}
-                >
-                  Create Project
-                </PrimaryButton>
-              </div>
-              <div className="hidden md:block self-end overflow-hidden pt-8">
-                <Image src={emptyDashboard} alt="Empty Dashboard" />
-              </div>
-            </div>
-          )
-        ) : null}
-      </div>
-    </WorkspaceAuthorizationLayout>
-  );
-};
+const WorkspacePage: NextPage = () => (
+  <AppLayout header={<WorkspaceDashboardHeader />}>
+    <WorkspaceDashboardView />
+  </AppLayout>
+);
 
 export default WorkspacePage;
diff --git a/web/pages/[workspaceSlug]/me/my-issues.tsx b/web/pages/[workspaceSlug]/me/my-issues.tsx
index 5b6ae3ecd..697e739e5 100644
--- a/web/pages/[workspaceSlug]/me/my-issues.tsx
+++ b/web/pages/[workspaceSlug]/me/my-issues.tsx
@@ -5,13 +5,13 @@ import { useRouter } from "next/router";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // hooks
 import useMyIssuesFilters from "hooks/my-issues/use-my-issues-filter";
 // components
 import { MyIssuesView, MyIssuesViewOptions } from "components/issues";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
 // types
 import type { NextPage } from "next";
@@ -85,16 +85,16 @@ const MyIssuesPage: NextPage = () => {
       right={
         <div className="flex items-center gap-2">
           <MyIssuesViewOptions />
-          <PrimaryButton
-            className="flex items-center gap-2"
+          <Button
+            variant="primary"
+            prependIcon={<PlusIcon />}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "c" });
               document.dispatchEvent(e);
             }}
           >
-            <PlusIcon className="h-4 w-4" />
             Add Issue
-          </PrimaryButton>
+          </Button>
         </div>
       }
     >
@@ -107,9 +107,7 @@ const MyIssuesPage: NextPage = () => {
                 type="button"
                 onClick={tab.onClick}
                 className={`border-b-2 p-4 text-sm font-medium outline-none whitespace-nowrap ${
-                  tab.selected
-                    ? "border-custom-primary-100 text-custom-primary-100"
-                    : "border-transparent"
+                  tab.selected ? "border-custom-primary-100 text-custom-primary-100" : "border-transparent"
                 }`}
               >
                 {tab.label}
diff --git a/web/pages/[workspaceSlug]/me/profile/activity.tsx b/web/pages/[workspaceSlug]/me/profile/activity.tsx
index 9305577cf..29c2a5fbe 100644
--- a/web/pages/[workspaceSlug]/me/profile/activity.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/activity.tsx
@@ -1,26 +1,27 @@
 import useSWR from "swr";
-
 import { useRouter } from "next/router";
 import Link from "next/link";
-
 // services
-import userService from "services/user.service";
+import { UserService } from "services/user.service";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import { ActivityIcon, ActivityMessage } from "components/core";
 import { RichReadOnlyEditor } from "@plane/rich-text-editor";
 // icons
 import { ArrowTopRightOnSquareIcon, ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
 // ui
-import { Icon, Loader } from "components/ui";
+import { Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { Loader } from "@plane/ui";
 // fetch-keys
 import { USER_ACTIVITY } from "constants/fetch-keys";
 // helper
 import { timeAgo } from "helpers/date-time.helper";
 import { SettingsSidebar } from "components/project";
 
+const userService = new UserService();
+
 const ProfileActivity = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
@@ -50,7 +51,7 @@ const ProfileActivity = () => {
             </div>
             <div className={`flex flex-col gap-2 py-4 w-full`}>
               <ul role="list" className="-mb-4">
-                {userActivity.results.map((activityItem: any, activityIdx: number) => {
+                {userActivity.results.map((activityItem: any) => {
                   if (activityItem.field === "comment") {
                     return (
                       <div key={activityItem.id} className="mt-2">
@@ -60,8 +61,7 @@ const ProfileActivity = () => {
                               activityItem.new_value === "restore" && (
                                 <Icon iconName="history" className="text-sm text-custom-text-200" />
                               )
-                            ) : activityItem.actor_detail.avatar &&
-                              activityItem.actor_detail.avatar !== "" ? (
+                            ) : activityItem.actor_detail.avatar && activityItem.actor_detail.avatar !== "" ? (
                               <img
                                 src={activityItem.actor_detail.avatar}
                                 alt={activityItem.actor_detail.display_name}
@@ -97,11 +97,7 @@ const ProfileActivity = () => {
                             </div>
                             <div className="issue-comments-section p-0">
                               <RichReadOnlyEditor
-                                value={
-                                  activityItem?.new_value !== ""
-                                    ? activityItem.new_value
-                                    : activityItem.old_value
-                                }
+                                value={activityItem?.new_value !== "" ? activityItem.new_value : activityItem.old_value}
                                 customClassName="text-xs border border-custom-border-200 bg-custom-background-100"
                                 noBorder
                                 borderOnFocus={false}
@@ -115,16 +111,14 @@ const ProfileActivity = () => {
 
                   const message =
                     activityItem.verb === "created" &&
-                      activityItem.field !== "cycles" &&
-                      activityItem.field !== "modules" &&
-                      activityItem.field !== "attachment" &&
-                      activityItem.field !== "link" &&
-                      activityItem.field !== "estimate" ? (
+                    activityItem.field !== "cycles" &&
+                    activityItem.field !== "modules" &&
+                    activityItem.field !== "attachment" &&
+                    activityItem.field !== "link" &&
+                    activityItem.field !== "estimate" ? (
                       <span className="text-custom-text-200">
                         created{" "}
-                        <Link
-                          href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}
-                        >
+                        <Link href={`/${workspaceSlug}/projects/${activityItem.project}/issues/${activityItem.issue}`}>
                           <a className="inline-flex items-center hover:underline">
                             this issue. <ArrowTopRightOnSquareIcon className="ml-1 h-3.5 w-3.5" />
                           </a>
@@ -148,10 +142,7 @@ const ProfileActivity = () => {
                                     <div className="flex h-6 w-6 items-center justify-center">
                                       {activityItem.field ? (
                                         activityItem.new_value === "restore" ? (
-                                          <Icon
-                                            iconName="history"
-                                            className="!text-2xl text-custom-text-200"
-                                          />
+                                          <Icon iconName="history" className="!text-2xl text-custom-text-200" />
                                         ) : (
                                           <ActivityIcon activity={activityItem} />
                                         )
@@ -177,26 +168,19 @@ const ProfileActivity = () => {
                               </div>
                               <div className="min-w-0 flex-1 py-4 border-b border-custom-border-200">
                                 <div className="text-sm text-custom-text-200 break-words">
-                                  {activityItem.field === "archived_at" &&
-                                    activityItem.new_value !== "restore" ? (
+                                  {activityItem.field === "archived_at" && activityItem.new_value !== "restore" ? (
                                     <span className="text-gray font-medium">Plane</span>
                                   ) : activityItem.actor_detail.is_bot ? (
                                     <span className="text-gray font-medium">
                                       {activityItem.actor_detail.first_name} Bot
                                     </span>
                                   ) : (
-                                    <Link
-                                      href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}
-                                    >
-                                      <a className="text-gray font-medium">
-                                        {activityItem.actor_detail.display_name}
-                                      </a>
+                                    <Link href={`/${workspaceSlug}/profile/${activityItem.actor_detail.id}`}>
+                                      <a className="text-gray font-medium">{activityItem.actor_detail.display_name}</a>
                                     </Link>
                                   )}{" "}
                                   {message}{" "}
-                                  <span className="whitespace-nowrap">
-                                    {timeAgo(activityItem.created_at)}
-                                  </span>
+                                  <span className="whitespace-nowrap">{timeAgo(activityItem.created_at)}</span>
                                 </div>
                               </div>
                             </>
diff --git a/web/pages/[workspaceSlug]/me/profile/index.tsx b/web/pages/[workspaceSlug]/me/profile/index.tsx
index 20719b84e..f104fe867 100644
--- a/web/pages/[workspaceSlug]/me/profile/index.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/index.tsx
@@ -1,22 +1,21 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
-
-// react-hook-form
 import { Controller, useForm } from "react-hook-form";
 // services
-import fileService from "services/file.service";
-import userService from "services/user.service";
+import { FileService } from "services/file.service";
+import { UserService } from "services/user.service";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import { ImagePickerPopover, ImageUploadModal } from "components/core";
 import { SettingsSidebar } from "components/project";
 // ui
-import { CustomSearchSelect, CustomSelect, Input, PrimaryButton, Spinner } from "components/ui";
+import { Button, Input, Spinner } from "@plane/ui";
+import { CustomSearchSelect, CustomSelect } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { UserIcon } from "@heroicons/react/24/outline";
@@ -38,15 +37,17 @@ const defaultValues: Partial<IUser> = {
   user_timezone: "Asia/Kolkata",
 };
 
+const fileService = new FileService();
+const userService = new UserService();
+
 const Profile: NextPage = () => {
   const [isRemoving, setIsRemoving] = useState(false);
   const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
-
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
-
+  // form info
   const {
-    register,
     handleSubmit,
     reset,
     watch,
@@ -174,12 +175,9 @@ const Profile: NextPage = () => {
             <div className={`flex flex-col gap-8 pr-9 py-9 w-full overflow-y-auto`}>
               <div className="relative h-44 w-full mt-6">
                 <img
-                  src={
-                    watch("cover_image") ??
-                    "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
-                  }
+                  src={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
                   className="h-44 w-full rounded-lg object-cover"
-                  alt={myProfile?.name ?? "Cover image"}
+                  alt={myProfile?.first_name ?? "Cover image"}
                 />
                 <div className="flex items-end justify-between absolute left-8 -bottom-6">
                   <div className="flex gap-3">
@@ -214,10 +212,8 @@ const Profile: NextPage = () => {
                         onChange={(imageUrl) => {
                           setValue("cover_image", imageUrl);
                         }}
-                        value={
-                          watch("cover_image") ??
-                          "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"
-                        }
+                        control={control}
+                        value={watch("cover_image") ?? "https://images.unsplash.com/photo-1506383796573-caf02b4a79ab"}
                       />
                     )}
                   />
@@ -245,42 +241,66 @@ const Profile: NextPage = () => {
               <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-6 px-8">
                 <div className="flex flex-col gap-1">
                   <h4 className="text-sm">First Name</h4>
-                  <Input
+                  <Controller
+                    control={control}
                     name="first_name"
-                    id="first_name"
-                    register={register}
-                    error={errors.first_name}
-                    placeholder="Enter your first name"
-                    className="!px-3 !py-2 rounded-md font-medium"
-                    autoComplete="off"
-                    maxLength={24}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="first_name"
+                        name="first_name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.first_name)}
+                        placeholder="Enter your first name"
+                        className="rounded-md font-medium w-full"
+                      />
+                    )}
                   />
                 </div>
 
                 <div className="flex flex-col gap-1">
                   <h4 className="text-sm">Last Name</h4>
-                  <Input
+
+                  <Controller
+                    control={control}
                     name="last_name"
-                    register={register}
-                    error={errors.last_name}
-                    id="last_name"
-                    placeholder="Enter your last name"
-                    autoComplete="off"
-                    className="!px-3 !py-2 rounded-md font-medium"
-                    maxLength={24}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="last_name"
+                        name="last_name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.last_name)}
+                        placeholder="Enter your last name"
+                        className="rounded-md font-medium w-full"
+                      />
+                    )}
                   />
                 </div>
 
                 <div className="flex flex-col gap-1">
                   <h4 className="text-sm">Email</h4>
-                  <Input
-                    id="email"
+                  <Controller
+                    control={control}
                     name="email"
-                    autoComplete="off"
-                    register={register}
-                    className="!px-3 !py-2 rounded-md font-medium"
-                    error={errors.name}
-                    disabled
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="email"
+                        name="email"
+                        type="email"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.email)}
+                        placeholder="Enter your last name"
+                        className="rounded-md font-medium w-full"
+                        disabled
+                      />
+                    )}
                   />
                 </div>
 
@@ -307,29 +327,20 @@ const Profile: NextPage = () => {
                       </CustomSelect>
                     )}
                   />
-                  {errors.role && (
-                    <span className="text-xs text-red-500">Please select a role</span>
-                  )}
+                  {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
                 </div>
 
                 <div className="flex flex-col gap-1">
                   <h4 className="text-sm">Display name </h4>
-
-                  <Input
-                    id="display_name"
+                  <Controller
+                    control={control}
                     name="display_name"
-                    autoComplete="off"
-                    register={register}
-                    error={errors.display_name}
-                    className="w-full"
-                    placeholder="Enter your display name"
-                    validations={{
+                    rules={{
                       required: "Display name is required.",
                       validate: (value) => {
                         if (value.trim().length < 1) return "Display name can't be empty.";
 
-                        if (value.split("  ").length > 1)
-                          return "Display name can't have two consecutive spaces.";
+                        if (value.split("  ").length > 1) return "Display name can't have two consecutive spaces.";
 
                         if (value.replace(/\s/g, "").length < 1)
                           return "Display name must be at least 1 characters long.";
@@ -340,6 +351,19 @@ const Profile: NextPage = () => {
                         return true;
                       },
                     }}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="display_name"
+                        name="display_name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.display_name)}
+                        placeholder="Enter your display name"
+                        className="w-full"
+                      />
+                    )}
                   />
                 </div>
 
@@ -353,11 +377,7 @@ const Profile: NextPage = () => {
                     render={({ field: { value, onChange } }) => (
                       <CustomSearchSelect
                         value={value}
-                        label={
-                          value
-                            ? TIME_ZONES.find((t) => t.value === value)?.label ?? value
-                            : "Select a timezone"
-                        }
+                        label={value ? TIME_ZONES.find((t) => t.value === value)?.label ?? value : "Select a timezone"}
                         options={timeZoneOptions}
                         onChange={onChange}
                         optionsClassName="w-full"
@@ -365,15 +385,13 @@ const Profile: NextPage = () => {
                       />
                     )}
                   />
-                  {errors.role && (
-                    <span className="text-xs text-red-500">Please select a role</span>
-                  )}
+                  {errors.role && <span className="text-xs text-red-500">Please select a role</span>}
                 </div>
 
                 <div className="flex items-center justify-between py-2">
-                  <PrimaryButton type="submit" loading={isSubmitting}>
+                  <Button variant="primary" type="submit" loading={isSubmitting}>
                     {isSubmitting ? "Updating Profile..." : "Update Profile"}
-                  </PrimaryButton>
+                  </Button>
                 </div>
               </div>
             </div>
diff --git a/web/pages/[workspaceSlug]/me/profile/preferences.tsx b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
index eb6a3c821..c936d9a31 100644
--- a/web/pages/[workspaceSlug]/me/profile/preferences.tsx
+++ b/web/pages/[workspaceSlug]/me/profile/preferences.tsx
@@ -2,11 +2,11 @@ import { useEffect, useState } from "react";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import { CustomThemeSelector, ThemeSwitch } from "components/core";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import { ICustomTheme } from "types";
@@ -36,17 +36,13 @@ const ProfilePreferences = observer(() => {
           background: currentTheme.background !== "" ? currentTheme.background : "#0d101b",
           text: currentTheme.text !== "" ? currentTheme.text : "#c5c5c5",
           primary: currentTheme.primary !== "" ? currentTheme.primary : "#3f76ff",
-          sidebarBackground:
-            currentTheme.sidebarBackground !== "" ? currentTheme.sidebarBackground : "#0d101b",
+          sidebarBackground: currentTheme.sidebarBackground !== "" ? currentTheme.sidebarBackground : "#0d101b",
           sidebarText: currentTheme.sidebarText !== "" ? currentTheme.sidebarText : "#c5c5c5",
           darkPalette: false,
-          palette:
-            currentTheme.palette !== ",,,,"
-              ? currentTheme.palette
-              : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
+          palette: currentTheme.palette !== ",,,," ? currentTheme.palette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5",
           theme: "custom",
         });
-      setCustomThemeSelectorOptions((prevData) => true);
+      setCustomThemeSelectorOptions(() => true);
     }
   }, [store, store?.theme?.theme]);
 
@@ -71,9 +67,7 @@ const ProfilePreferences = observer(() => {
             <div className="grid grid-cols-12 gap-4 sm:gap-16 py-6">
               <div className="col-span-12 sm:col-span-6">
                 <h4 className="text-lg font-semibold text-custom-text-100">Theme</h4>
-                <p className="text-sm text-custom-text-200">
-                  Select or customize your interface color scheme.
-                </p>
+                <p className="text-sm text-custom-text-200">Select or customize your interface color scheme.</p>
               </div>
               <div className="col-span-12 sm:col-span-6">
                 <ThemeSwitch
diff --git a/web/pages/[workspaceSlug]/profile/[userId]/index.tsx b/web/pages/[workspaceSlug]/profile/[userId]/index.tsx
index 0cf54bb0d..c674dcf33 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 e4a1c37b2..a7729d847 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -7,17 +7,18 @@ import useSWR, { mutate } from "swr";
 // react-hook-form
 import { useForm } from "react-hook-form";
 // services
-import issuesService from "services/issues.service";
+import { IssueService, IssueArchiveService } from "services/issue";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useToast from "hooks/use-toast";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
-import { Icon, Loader } from "components/ui";
+import { Icon } from "components/ui";
 import { Breadcrumbs } from "components/breadcrumbs";
+import { Loader } from "@plane/ui";
 // types
 import { IIssue } from "types";
 import type { NextPage } from "next";
@@ -40,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);
 
@@ -53,7 +58,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
     workspaceSlug && projectId && archivedIssueId ? ISSUE_DETAILS(archivedIssueId as string) : null,
     workspaceSlug && projectId && archivedIssueId
       ? () =>
-          issuesService.retrieveArchivedIssue(
+          issueArchiveService.retrieveArchivedIssue(
             workspaceSlug as string,
             projectId as string,
             archivedIssueId as string
@@ -86,14 +91,8 @@ const ArchivedIssueDetailsPage: NextPage = () => {
         ...formData,
       };
 
-      await issuesService
-        .patchIssue(
-          workspaceSlug as string,
-          projectId as string,
-          archivedIssueId as string,
-          payload,
-          user
-        )
+      await issueService
+        .patchIssue(workspaceSlug as string, projectId as string, archivedIssueId as string, payload, user)
         .then(() => {
           mutateIssueDetails();
           mutate(PROJECT_ISSUES_ACTIVITY(archivedIssueId as string));
@@ -111,8 +110,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
     mutate(PROJECT_ISSUES_ACTIVITY(archivedIssueId as string));
     reset({
       ...issueDetails,
-      assignees_list:
-        issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
+      assignees_list: issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
       labels_list: issueDetails.labels_list ?? issueDetails.labels,
       labels: issueDetails.labels_list ?? issueDetails.labels,
     });
@@ -123,7 +121,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
 
     setIsRestoring(true);
 
-    await issuesService
+    await issueArchiveService
       .unarchiveIssue(workspaceSlug as string, projectId as string, archivedIssueId as string)
       .then(() => {
         setToastAlert({
@@ -181,11 +179,7 @@ const ArchivedIssueDetailsPage: NextPage = () => {
               </div>
             )}
             <div className="space-y-5 divide-y-2 divide-custom-border-200 opacity-60 pointer-events-none">
-              <IssueMainContent
-                issueDetails={issueDetails}
-                submitChanges={submitChanges}
-                uneditable
-              />
+              <IssueMainContent issueDetails={issueDetails} submitChanges={submitChanges} uneditable />
             </div>
           </div>
           <div className="w-1/3 h-full space-y-5 border-l border-custom-border-300 p-5 overflow-hidden">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
index d09ee9ffa..debdd5425 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@@ -3,9 +3,9 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // helper
@@ -22,15 +22,16 @@ 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;
 
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
   );
 
   return (
@@ -39,9 +40,7 @@ const ProjectArchivedIssues: NextPage = () => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived Issues`}
-            />
+            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived Issues`} />
           </Breadcrumbs>
         }
         right={
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 65007db3c..8b1a6eee1 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -1,28 +1,26 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
 // icons
 import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import { CyclesIcon } from "components/icons";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // components
-import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
+import { ExistingIssuesListModal } from "components/core";
 import { CycleDetailsSidebar, TransferIssues, TransferIssuesModal } from "components/cycles";
+import { CycleLayoutRoot } from "components/issues/issue-layouts";
 // services
-import issuesService from "services/issues.service";
-import cycleServices from "services/cycles.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";
-// components
-import { AnalyticsProjectModal } from "components/analytics";
 // ui
-import { CustomMenu, EmptyState, SecondaryButton } 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";
@@ -33,6 +31,11 @@ import { getDateRangeStatus } from "helpers/date-time.helper";
 import { ISearchIssueResponse } from "types";
 // fetch-keys
 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);
@@ -50,19 +53,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
   );
 
@@ -71,10 +69,6 @@ const SingleCycle: React.FC = () => {
       ? getDateRangeStatus(cycleDetails?.start_date, cycleDetails?.end_date)
       : "draft";
 
-  const openIssuesListModal = () => {
-    setCycleIssuesListModal(true);
-  };
-
   const handleAddIssuesToCycle = async (data: ISearchIssueResponse[]) => {
     if (!workspaceSlug || !projectId) return;
 
@@ -82,14 +76,8 @@ const SingleCycle: React.FC = () => {
       issues: data.map((i) => i.id),
     };
 
-    await issuesService
-      .addIssueToCycle(
-        workspaceSlug as string,
-        projectId as string,
-        cycleId as string,
-        payload,
-        user
-      )
+    await issueService
+      .addIssueToCycle(workspaceSlug as string, projectId as string, cycleId as string, payload, user)
       .catch(() => {
         setToastAlert({
           type: "error",
@@ -141,14 +129,7 @@ const SingleCycle: React.FC = () => {
         }
         right={
           <div className={`flex flex-shrink-0 items-center gap-2 duration-300`}>
-            <IssuesFilterView />
-            <SecondaryButton
-              onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
-              outline
-            >
-              Analytics
-            </SecondaryButton>
+            <CycleIssuesHeader />
             <button
               type="button"
               className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
@@ -173,28 +154,16 @@ const SingleCycle: React.FC = () => {
           />
         ) : (
           <>
-            <TransferIssuesModal
-              handleClose={() => setTransferIssuesModal(false)}
-              isOpen={transferIssuesModal}
-            />
-            <AnalyticsProjectModal
-              isOpen={analyticsModal}
-              onClose={() => setAnalyticsModal(false)}
-            />
+            <TransferIssuesModal handleClose={() => setTransferIssuesModal(false)} isOpen={transferIssuesModal} />
+
             <div
-              className={`h-full flex flex-col ${cycleSidebar ? "mr-[24rem]" : ""} ${
+              className={`relative w-full h-full flex flex-col overflow-auto ${cycleSidebar ? "mr-[24rem]" : ""} ${
                 analyticsModal ? "mr-[50%]" : ""
               } duration-300`}
             >
-              {cycleStatus === "completed" && (
-                <TransferIssues handleClick={() => setTransferIssuesModal(true)} />
-              )}
-              <div className="relative overflow-y-auto w-full h-full">
-                <IssuesView
-                  openIssuesListModal={openIssuesListModal}
-                  disableUserActions={cycleStatus === "completed" ?? false}
-                />
-              </div>
+              {cycleStatus === "completed" && <TransferIssues handleClick={() => setTransferIssuesModal(true)} />}
+
+              <CycleLayoutRoot />
             </div>
             <CycleDetailsSidebar
               cycleStatus={cycleStatus}
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 7633d41bd..f1b7f5ea2 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -1,26 +1,18 @@
 import React, { useEffect, useState } from "react";
-
 import { useRouter } from "next/router";
-
-// headless ui
 import { Tab } from "@headlessui/react";
+import useSWR from "swr";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
-import useProjectDetails from "hooks/use-project-details";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
-import {
-  ActiveCycleDetails,
-  AllCyclesList,
-  CompletedCyclesList,
-  CreateUpdateCycleModal,
-  DraftCyclesList,
-  UpcomingCyclesList,
-} from "components/cycles";
+import { CyclesView, ActiveCycleDetails, CreateUpdateCycleModal } from "components/cycles";
 // ui
-import { EmptyState, Icon, PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+import { EmptyState } from "components/common";
+import { Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -31,54 +23,42 @@ import { SelectCycleType } from "types";
 import type { NextPage } from "next";
 // helper
 import { truncateText } from "helpers/string.helper";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { observer } from "mobx-react-lite";
+// constants
+import { CYCLE_TAB_LIST, CYCLE_VIEWS } from "constants/cycle";
 
-const tabsList = ["All", "Active", "Upcoming", "Completed", "Drafts"];
+type ICycleAPIFilter = "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete";
+type ICycleView = "list" | "board" | "gantt";
 
-const cycleViews = [
-  {
-    key: "list",
-    icon: "list",
-  },
-  {
-    key: "board",
-    icon: "dataset",
-  },
-  {
-    key: "gantt",
-    icon: "view_timeline",
-  },
-];
-
-const ProjectCycles: NextPage = () => {
+const ProjectCyclesPage: NextPage = observer(() => {
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+  // store
+  const { project: projectStore } = useMobxStore();
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+  // states
   const [selectedCycle, setSelectedCycle] = useState<SelectCycleType>();
   const [createUpdateCycleModal, setCreateUpdateCycleModal] = useState(false);
-
-  const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycleTab", "All");
-  const { storedValue: cyclesView, setValue: setCyclesView } = useLocalStorage("cycleView", "list");
-
-  const currentTabValue = (tab: string | null) => {
-    switch (tab) {
-      case "All":
-        return 0;
-      case "Active":
-        return 1;
-      case "Upcoming":
-        return 2;
-      case "Completed":
-        return 3;
-      case "Drafts":
-        return 4;
-      default:
-        return 0;
-    }
-  };
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
+  // local storage
+  const { storedValue: cycleTab, setValue: setCycleTab } = useLocalStorage("cycle_tab", "all");
+  const { storedValue: cyclesView, setValue: setCyclesView } = useLocalStorage("cycle_view", "list");
+  // hooks
   const { user } = useUserAuth();
-  const { projectDetails } = useProjectDetails();
+  // api call fetch project details
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_DETAILS_${projectId}` : null,
+    workspaceSlug && projectId
+      ? () => {
+          projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString());
+        }
+      : null
+  );
 
+  /**
+   * Clearing form data after closing the modal
+   */
   useEffect(() => {
     if (createUpdateCycleModal) return;
 
@@ -88,6 +68,12 @@ const ProjectCycles: NextPage = () => {
     }, 500);
   }, [createUpdateCycleModal]);
 
+  useEffect(() => {
+    if (cycleTab === "draft" && cyclesView === "gantt") {
+      setCyclesView("list");
+    }
+  }, [cycleTab, cyclesView, setCyclesView]);
+
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
@@ -97,16 +83,16 @@ const ProjectCycles: NextPage = () => {
         </Breadcrumbs>
       }
       right={
-        <PrimaryButton
-          className="flex items-center gap-2"
+        <Button
+          variant="primary"
+          prependIcon={<PlusIcon />}
           onClick={() => {
             const e = new KeyboardEvent("keydown", { key: "q" });
             document.dispatchEvent(e);
           }}
         >
-          <PlusIcon className="h-4 w-4" />
           Add Cycle
-        </PrimaryButton>
+        </Button>
       }
     >
       <CreateUpdateCycleModal
@@ -137,60 +123,42 @@ const ProjectCycles: NextPage = () => {
         <Tab.Group
           as="div"
           className="h-full flex flex-col overflow-hidden"
-          defaultIndex={currentTabValue(cycleTab)}
-          selectedIndex={currentTabValue(cycleTab)}
+          defaultIndex={CYCLE_TAB_LIST.findIndex((i) => i.key === cycleTab)}
+          selectedIndex={CYCLE_TAB_LIST.findIndex((i) => i.key === cycleTab)}
           onChange={(i) => {
-            switch (i) {
-              case 0:
-                return setCycleTab("All");
-              case 1:
-                return setCycleTab("Active");
-              case 2:
-                return setCycleTab("Upcoming");
-              case 3:
-                return setCycleTab("Completed");
-              case 4:
-                return setCycleTab("Drafts");
-              default:
-                return setCycleTab("All");
+            try {
+              setCycleTab(CYCLE_TAB_LIST[i].key);
+            } catch (e) {
+              setCycleTab(CYCLE_TAB_LIST[0].key);
             }
           }}
         >
           <div className="flex flex-col sm:flex-row gap-4 justify-between border-b border-custom-border-300 px-4 sm:px-5 pb-4 sm:pb-0">
             <Tab.List as="div" className="flex items-center overflow-x-scroll">
-              {tabsList.map((tab, index) => {
-                if (cyclesView === "gantt_chart" && (tab === "Active" || tab === "Drafts"))
-                  return null;
-
-                return (
-                  <Tab
-                    key={index}
-                    className={({ selected }) =>
-                      `border-b-2 p-4 text-sm font-medium outline-none ${
-                        selected
-                          ? "border-custom-primary-100 text-custom-primary-100"
-                          : "border-transparent"
-                      }`
-                    }
-                  >
-                    {tab}
-                  </Tab>
-                );
-              })}
+              {CYCLE_TAB_LIST.map((tab) => (
+                <Tab
+                  key={tab.key}
+                  className={({ selected }) =>
+                    `border-b-2 p-4 text-sm font-medium outline-none ${
+                      selected ? "border-custom-primary-100 text-custom-primary-100" : "border-transparent"
+                    }`
+                  }
+                >
+                  {tab.name}
+                </Tab>
+              ))}
             </Tab.List>
             <div className="justify-end sm:justify-start flex items-center gap-x-1">
-              {cycleViews.map((view) => {
-                if (cycleTab === "Active") return null;
-                if (view.key === "gantt" && cycleTab === "Drafts") return null;
+              {CYCLE_VIEWS.map((view) => {
+                if (cycleTab === "active") return null;
+                if (view.key === "gantt" && cycleTab === "draft") return null;
 
                 return (
                   <button
                     key={view.key}
                     type="button"
                     className={`grid h-8 w-8 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-80 ${
-                      cyclesView === view.key
-                        ? "bg-custom-background-80 text-custom-text-100"
-                        : "text-custom-text-200"
+                      cyclesView === view.key ? "bg-custom-background-80 text-custom-text-100" : "text-custom-text-200"
                     }`}
                     onClick={() => setCyclesView(view.key)}
                   >
@@ -202,29 +170,53 @@ const ProjectCycles: NextPage = () => {
           </div>
           <Tab.Panels as={React.Fragment}>
             <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
-              <AllCyclesList viewType={cyclesView} />
+              {cycleTab && cyclesView && workspaceSlug && projectId && (
+                <CyclesView
+                  filter="all"
+                  view={cyclesView as ICycleView}
+                  workspaceSlug={workspaceSlug?.toString()}
+                  projectId={projectId?.toString()}
+                />
+              )}
             </Tab.Panel>
-            {cyclesView !== "gantt_chart" && (
-              <Tab.Panel as="div" className="p-4 sm:p-5 space-y-5 h-full overflow-y-auto">
-                <ActiveCycleDetails />
-              </Tab.Panel>
-            )}
-            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
-              <UpcomingCyclesList viewType={cyclesView} />
+            <Tab.Panel as="div" className="p-4 sm:p-5 space-y-5 h-full overflow-y-auto">
+              <ActiveCycleDetails />
             </Tab.Panel>
             <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
-              <CompletedCyclesList viewType={cyclesView} />
+              {cycleTab && cyclesView && workspaceSlug && projectId && (
+                <CyclesView
+                  filter="upcoming"
+                  view={cyclesView as ICycleView}
+                  workspaceSlug={workspaceSlug?.toString()}
+                  projectId={projectId?.toString()}
+                />
+              )}
+            </Tab.Panel>
+            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
+              {cycleTab && cyclesView && workspaceSlug && projectId && (
+                <CyclesView
+                  filter="completed"
+                  view={cyclesView as ICycleView}
+                  workspaceSlug={workspaceSlug?.toString()}
+                  projectId={projectId?.toString()}
+                />
+              )}
+            </Tab.Panel>
+            <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
+              {cycleTab && cyclesView && workspaceSlug && projectId && (
+                <CyclesView
+                  filter="draft"
+                  view={cyclesView as ICycleView}
+                  workspaceSlug={workspaceSlug?.toString()}
+                  projectId={projectId?.toString()}
+                />
+              )}
             </Tab.Panel>
-            {cyclesView !== "gantt_chart" && (
-              <Tab.Panel as="div" className="p-4 sm:p-5 h-full overflow-y-auto">
-                <DraftCyclesList viewType={cyclesView} />
-              </Tab.Panel>
-            )}
           </Tab.Panels>
         </Tab.Group>
       )}
     </ProjectAuthorizationWrapper>
   );
-};
+});
 
-export default ProjectCycles;
+export default ProjectCyclesPage;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
index aaf854e11..d2b073a32 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/draft-issues/index.tsx
@@ -3,9 +3,9 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // contexts
 import { IssueViewContextProvider } from "contexts/issue-view.context";
 // helper
@@ -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,15 +21,16 @@ 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;
 
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
   );
 
   return (
@@ -39,9 +39,7 @@ const ProjectDraftIssues: NextPage = () => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Draft Issues`}
-            />
+            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Draft Issues`} />
           </Breadcrumbs>
         }
         right={
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index 7a82ac61f..efbc960c8 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // contexts
 import { InboxViewContextProvider } from "contexts/inbox-view-context";
 // components
@@ -11,7 +11,7 @@ import { InboxActionHeader, InboxMainContent, IssuesListSidebar } from "componen
 // helper
 import { truncateText } from "helpers/string.helper";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -30,23 +30,21 @@ const ProjectInbox: NextPage = () => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Inbox`}
-            />
+            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Inbox`} />
           </Breadcrumbs>
         }
         right={
           <div className="flex items-center gap-2">
-            <PrimaryButton
-              className="flex items-center gap-2"
+            <Button
+              variant="primary"
+              prependIcon={<PlusIcon />}
               onClick={() => {
                 const e = new KeyboardEvent("keydown", { key: "c" });
                 document.dispatchEvent(e);
               }}
             >
-              <PlusIcon className="h-4 w-4" />
               Add Issue
-            </PrimaryButton>
+            </Button>
           </div>
         }
       >
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index d686fc357..158201aa8 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -7,16 +7,17 @@ import useSWR, { mutate } from "swr";
 // react-hook-form
 import { useForm } from "react-hook-form";
 // services
-import issuesService from "services/issues.service";
+import { IssueService } from "services/issue";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { IssueDetailsSidebar, IssueMainContent } from "components/issues";
 // ui
-import { EmptyState, Loader } from "components/ui";
+import { EmptyState } from "components/common";
 import { Breadcrumbs } from "components/breadcrumbs";
+import { Loader } from "@plane/ui";
 // images
 import emptyIssue from "public/empty-state/issue.svg";
 // types
@@ -42,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;
@@ -56,8 +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();
@@ -108,8 +111,7 @@ const IssueDetailsPage: NextPage = () => {
     mutate(PROJECT_ISSUES_ACTIVITY(issueId as string));
     reset({
       ...issueDetails,
-      assignees_list:
-        issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
+      assignees_list: issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
       labels_list: issueDetails.labels_list ?? issueDetails.labels,
       labels: issueDetails.labels_list ?? issueDetails.labels,
     });
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index cb7b1fd33..ac193e325 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -1,110 +1,83 @@
-import { useState } from "react";
-
-import Link from "next/link";
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
+// mobx
+import { useMobxStore } from "lib/mobx/store-provider";
 // services
-import projectService from "services/project.service";
-import inboxService from "services/inbox.service";
+import { ProjectService } from "services/project";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// contexts
-import { IssueViewContextProvider } from "contexts/issue-view.context";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // helper
 import { truncateText } from "helpers/string.helper";
 // components
-import { IssuesFilterView, IssuesView } from "components/core";
-import { AnalyticsProjectModal } from "components/analytics";
+import { ProjectLayoutRoot } from "components/issues";
+import { ProjectIssuesHeader } from "components/headers";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
 // types
 import type { NextPage } from "next";
 // fetch-keys
-import { PROJECT_DETAILS, INBOX_LIST } from "constants/fetch-keys";
+import { PROJECT_DETAILS } from "constants/fetch-keys";
+
+// services
+const projectService = new ProjectService();
 
 const ProjectIssues: NextPage = () => {
-  const [analyticsModal, setAnalyticsModal] = useState(false);
-
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
+  const { issueFilter: issueFilterStore, project: projectStore } = useMobxStore();
+
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
+  );
+
+  // TODO: update the fetch keys
+  useSWR(
+    workspaceSlug && projectId ? "REVALIDATE_USER_PROJECT_FILTERS" : null,
     workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      ? () => issueFilterStore.fetchUserProjectFilters(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
-  const { data: inboxList } = useSWR(
-    workspaceSlug && projectId ? INBOX_LIST(projectId as string) : null,
+  useSWR(
+    workspaceSlug && projectId ? "REVALIDATE_PROJECT_STATES_LIST" : null,
     workspaceSlug && projectId
-      ? () => inboxService.getInboxes(workspaceSlug as string, projectId as string)
+      ? () => projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  useSWR(
+    workspaceSlug && projectId ? "REVALIDATE_PROJECT_LABELS_LIST" : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
+      : null
+  );
+
+  useSWR(
+    workspaceSlug && projectId ? "REVALIDATE_PROJECT_MEMBERS_LIST" : null,
+    workspaceSlug && projectId
+      ? () => projectStore.fetchProjectMembers(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
   return (
-    <IssueViewContextProvider>
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Issues`}
-            />
-          </Breadcrumbs>
-        }
-        right={
-          <div className="flex items-center gap-2">
-            <IssuesFilterView />
-            <SecondaryButton
-              onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-border-200 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
-              outline
-            >
-              Analytics
-            </SecondaryButton>
-            {projectDetails && projectDetails.inbox_view && (
-              <Link href={`/${workspaceSlug}/projects/${projectId}/inbox/${inboxList?.[0]?.id}`}>
-                <a>
-                  <SecondaryButton
-                    className="relative !py-1.5 rounded-md font-normal text-custom-sidebar-text-200 border-custom-border-200 hover:text-custom-text-100 hover:bg-custom-sidebar-background-90"
-                    outline
-                  >
-                    <span>Inbox</span>
-                    {inboxList && inboxList?.[0]?.pending_issue_count !== 0 && (
-                      <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full text-custom-text-100 bg-custom-sidebar-background-80 border border-custom-sidebar-border-200">
-                        {inboxList?.[0]?.pending_issue_count}
-                      </span>
-                    )}
-                  </SecondaryButton>
-                </a>
-              </Link>
-            )}
-            <PrimaryButton
-              className="flex items-center gap-2"
-              onClick={() => {
-                const e = new KeyboardEvent("keydown", { key: "c" });
-                document.dispatchEvent(e);
-              }}
-            >
-              <PlusIcon className="h-4 w-4" />
-              Add Issue
-            </PrimaryButton>
-          </div>
-        }
-        bg="secondary"
-      >
-        <AnalyticsProjectModal isOpen={analyticsModal} onClose={() => setAnalyticsModal(false)} />
-        <div className="h-full w-full flex flex-col">
-          <IssuesView />
-        </div>
-      </ProjectAuthorizationWrapper>
-    </IssueViewContextProvider>
+    <ProjectAuthorizationWrapper
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
+          <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Issues`} />
+        </Breadcrumbs>
+      }
+      right={<ProjectIssuesHeader />}
+      bg="secondary"
+    >
+      <div className="h-full w-full flex flex-col">
+        <ProjectLayoutRoot />
+      </div>
+    </ProjectAuthorizationWrapper>
   );
 };
 
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index b72ea9d19..58573c958 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -1,26 +1,23 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
 // icons
-import { ArrowLeftIcon, RectangleGroupIcon } from "@heroicons/react/24/outline";
+import { RectangleGroupIcon } from "@heroicons/react/24/outline";
 // services
-import modulesService from "services/modules.service";
+import { ModuleService } from "services/module.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// contexts
-import { IssueViewContextProvider } from "contexts/issue-view.context";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
-import { ExistingIssuesListModal, IssuesFilterView, IssuesView } from "components/core";
+import { ExistingIssuesListModal } from "components/core";
 import { ModuleDetailsSidebar } from "components/modules";
-import { AnalyticsProjectModal } from "components/analytics";
+import { ModuleLayoutRoot } from "components/issues";
+import { ModuleIssuesHeader } from "components/headers";
 // ui
-import { CustomMenu, EmptyState, SecondaryButton } 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";
@@ -31,10 +28,12 @@ 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(true);
-  const [analyticsModal, setAnalyticsModal] = useState(false);
+  const [moduleSidebar, setModuleSidebar] = useState(false);
 
   const router = useRouter();
   const { workspaceSlug, projectId, moduleId } = router.query;
@@ -45,32 +44,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
   );
 
@@ -81,14 +68,8 @@ const SingleModule: React.FC = () => {
       issues: data.map((i) => i.id),
     };
 
-    await modulesService
-      .addIssuesToModule(
-        workspaceSlug as string,
-        projectId as string,
-        moduleId as string,
-        payload,
-        user
-      )
+    await moduleService
+      .addIssuesToModule(workspaceSlug as string, projectId as string, moduleId as string, payload, user)
       .catch(() =>
         setToastAlert({
           type: "error",
@@ -103,7 +84,7 @@ const SingleModule: React.FC = () => {
   };
 
   return (
-    <IssueViewContextProvider>
+    <>
       <ExistingIssuesListModal
         isOpen={moduleIssuesListModal}
         handleClose={() => setModuleIssuesListModal(false)}
@@ -142,27 +123,7 @@ const SingleModule: React.FC = () => {
             ))}
           </CustomMenu>
         }
-        right={
-          <div className={`flex items-center gap-2 duration-300`}>
-            <IssuesFilterView />
-            <SecondaryButton
-              onClick={() => setAnalyticsModal(true)}
-              className="!py-1.5 font-normal rounded-md text-custom-text-200 hover:text-custom-text-100"
-              outline
-            >
-              Analytics
-            </SecondaryButton>
-            <button
-              type="button"
-              className={`grid h-7 w-7 place-items-center rounded p-1 outline-none duration-300 hover:bg-custom-background-90 ${
-                moduleSidebar ? "rotate-180" : ""
-              }`}
-              onClick={() => setModuleSidebar((prevData) => !prevData)}
-            >
-              <ArrowLeftIcon className="h-4 w-4" />
-            </button>
-          </div>
-        }
+        right={<ModuleIssuesHeader />}
       >
         {error ? (
           <EmptyState
@@ -176,16 +137,12 @@ const SingleModule: React.FC = () => {
           />
         ) : (
           <>
-            <AnalyticsProjectModal
-              isOpen={analyticsModal}
-              onClose={() => setAnalyticsModal(false)}
-            />
             <div
               className={`relative overflow-y-auto h-full flex flex-col ${
                 moduleSidebar ? "mr-[24rem]" : ""
-              } ${analyticsModal ? "mr-[50%]" : ""} duration-300`}
+              } duration-300`}
             >
-              <IssuesView openIssuesListModal={openIssuesListModal} />
+              <ModuleLayoutRoot />
             </div>
             <ModuleDetailsSidebar
               module={moduleDetails}
@@ -196,7 +153,7 @@ const SingleModule: React.FC = () => {
           </>
         )}
       </ProjectAuthorizationWrapper>
-    </IssueViewContextProvider>
+    </>
   );
 };
 
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index 028e95540..4176ba426 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -5,20 +5,18 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
-import projectService from "services/project.service";
-import modulesService from "services/modules.service";
+import { ProjectService } from "services/project";
+import { ModuleService } from "services/module.service";
 // components
-import {
-  CreateUpdateModuleModal,
-  ModulesListGanttChartView,
-  SingleModuleCard,
-} from "components/modules";
+import { CreateUpdateModuleModal, ModulesListGanttChartView, SingleModuleCard } from "components/modules";
 // ui
-import { EmptyState, Icon, Loader, PrimaryButton, Tooltip } from "components/ui";
+import { Button, Loader, Tooltip } from "@plane/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";
@@ -43,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);
@@ -56,16 +58,12 @@ const ProjectModules: NextPage = () => {
 
   const { data: activeProject } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
   );
 
   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) => {
@@ -95,37 +93,30 @@ const ProjectModules: NextPage = () => {
           {moduleViewOptions.map((option) => (
             <Tooltip
               key={option.type}
-              tooltipContent={
-                <span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</span>
-              }
+              tooltipContent={<span className="capitalize">{replaceUnderscoreIfSnakeCase(option.type)} Layout</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-80 duration-300 ${
-                  modulesView === option.type
-                    ? "bg-custom-sidebar-background-80"
-                    : "text-custom-sidebar-text-200"
+                  modulesView === option.type ? "bg-custom-sidebar-background-80" : "text-custom-sidebar-text-200"
                 }`}
                 onClick={() => setModulesView(option.type)}
               >
-                <Icon
-                  iconName={option.icon}
-                  className={`!text-base ${option.type === "grid" ? "rotate-90" : ""}`}
-                />
+                <Icon iconName={option.icon} className={`!text-base ${option.type === "grid" ? "rotate-90" : ""}`} />
               </button>
             </Tooltip>
           ))}
-          <PrimaryButton
-            className="flex items-center gap-2"
+          <Button
+            variant="primary"
+            prependIcon={<PlusIcon />}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "m" });
               document.dispatchEvent(e);
             }}
           >
-            <PlusIcon className="h-4 w-4" />
             Add Module
-          </PrimaryButton>
+          </Button>
         </div>
       }
     >
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index abd8a3601..92c4d6d22 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // react-hook-form
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // headless ui
 import { Popover, Transition } from "@headlessui/react";
 // react-color
@@ -14,28 +14,23 @@ 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";
-import pagesService from "services/pages.service";
-import issuesService from "services/issues.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";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
 import { CreateLabelModal } from "components/labels";
 import { CreateBlock } from "components/pages/create-block";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-import {
-  CustomSearchSelect,
-  EmptyState,
-  Loader,
-  TextArea,
-  ToggleSwitch,
-  Tooltip,
-} 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";
 // icons
@@ -66,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);
@@ -80,45 +80,33 @@ const SinglePage: NextPage = () => {
 
   const { user } = useUser();
 
-  const { handleSubmit, reset, watch, setValue } = useForm<IPage>({
+  const { handleSubmit, reset, watch, setValue, control } = useForm<IPage>({
     defaultValues: { name: "" },
   });
 
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
   );
 
   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)
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -134,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>(
@@ -161,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));
@@ -186,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,
     });
   };
@@ -209,11 +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) => {
@@ -228,15 +212,9 @@ const SinglePage: NextPage = () => {
       newSortOrder = pageBlocks[pageBlocks.length - 1].sort_order + 10000;
     else {
       if (destination.index > source.index)
-        newSortOrder =
-          (pageBlocks[destination.index].sort_order +
-            pageBlocks[destination.index + 1].sort_order) /
-          2;
+        newSortOrder = (pageBlocks[destination.index].sort_order + pageBlocks[destination.index + 1].sort_order) / 2;
       else if (destination.index < source.index)
-        newSortOrder =
-          (pageBlocks[destination.index - 1].sort_order +
-            pageBlocks[destination.index].sort_order) /
-          2;
+        newSortOrder = (pageBlocks[destination.index - 1].sort_order + pageBlocks[destination.index].sort_order) / 2;
     }
 
     const newBlocksList = pageBlocks.map((p) => ({
@@ -249,7 +227,7 @@ const SinglePage: NextPage = () => {
       false
     );
 
-    pagesService.patchPageBlock(
+    pageService.patchPageBlock(
       workspaceSlug as string,
       projectId as string,
       pageId as string,
@@ -262,18 +240,15 @@ const SinglePage: NextPage = () => {
   };
 
   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/${projectId}/pages/${pageId}`).then(
-      () => {
-        setToastAlert({
-          type: "success",
-          title: "Link Copied!",
-          message: "Page link copied to clipboard.",
-        });
-      }
-    );
+    copyTextToClipboard(`${originURL}/${workspaceSlug}/projects/${projectId}/pages/${pageId}`).then(() => {
+      setToastAlert({
+        type: "success",
+        title: "Link Copied!",
+        message: "Page link copied to clipboard.",
+      });
+    });
   };
 
   const handleShowBlockToggle = async () => {
@@ -288,9 +263,7 @@ const SinglePage: NextPage = () => {
     };
 
     mutate<IProjectMember>(
-      (workspaceSlug as string) && (projectId as string)
-        ? USER_PROJECT_VIEW(projectId as string)
-        : null,
+      (workspaceSlug as string) && (projectId as string) ? USER_PROJECT_VIEW(projectId as string) : null,
       (prevData) => {
         if (!prevData) return prevData;
 
@@ -302,15 +275,13 @@ const SinglePage: NextPage = () => {
       false
     );
 
-    await projectService
-      .setProjectView(workspaceSlug as string, projectId as string, payload)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Something went wrong. Please try again.",
-        });
+    await projectService.setProjectView(workspaceSlug as string, projectId as string, payload).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Something went wrong. Please try again.",
       });
+    });
   };
 
   const options = labels?.map((label) => ({
@@ -375,17 +346,22 @@ const SinglePage: NextPage = () => {
                     <ArrowLeftIcon className="h-4 w-4" />
                   </button>
 
-                  <TextArea
-                    id="name"
+                  <Controller
                     name="name"
-                    placeholder="Page Title"
-                    value={watch("name")}
-                    onBlur={handleSubmit(updatePage)}
-                    onChange={(e) => setValue("name", e.target.value)}
-                    required={true}
-                    className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-2 text-xl font-semibold outline-none ring-0"
-                    role="textbox"
-                    noPadding
+                    control={control}
+                    render={({ field: { value, onChange } }) => (
+                      <TextArea
+                        id="name"
+                        name="name"
+                        value={watch("name")}
+                        placeholder="Page Title"
+                        onBlur={handleSubmit(updatePage)}
+                        onChange={(e) => setValue("name", e.target.value)}
+                        required={true}
+                        className="min-h-10 block w-full resize-none overflow-hidden rounded border-none bg-transparent !px-3 !py-2 text-xl font-semibold outline-none ring-0"
+                        role="textbox"
+                      />
+                    )}
                   />
                 </div>
 
@@ -406,16 +382,13 @@ const SinglePage: NextPage = () => {
                               partialUpdatePage({ labels_list: updatedLabels });
                             }}
                             style={{
-                              backgroundColor: `${
-                                label?.color && label.color !== "" ? label.color : "#000000"
-                              }20`,
+                              backgroundColor: `${label?.color && label.color !== "" ? label.color : "#000000"}20`,
                             }}
                           >
                             <span
                               className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
                               style={{
-                                backgroundColor:
-                                  label?.color && label.color !== "" ? label.color : "#000000",
+                                backgroundColor: label?.color && label.color !== "" ? label.color : "#000000",
                               }}
                             />
                             {label.name}
@@ -489,9 +462,7 @@ const SinglePage: NextPage = () => {
                           <Popover.Panel className="absolute right-0 z-30 mt-1 w-screen max-w-xs transform rounded-lg border border-custom-border-200 bg-custom-background-90 p-3 shadow-lg">
                             <div className="relative divide-y-2 divide-custom-border-200">
                               <div className="flex items-center justify-between">
-                                <span className="text-sm text-custom-text-200">
-                                  Show full block content
-                                </span>
+                                <span className="text-sm text-custom-text-200">Show full block content</span>
                                 <ToggleSwitch
                                   value={showBlock}
                                   onChange={(value) => {
@@ -591,11 +562,7 @@ const SinglePage: NextPage = () => {
                           <LockClosedIcon className="h-4 w-4" />
                         </button>
                       ) : (
-                        <button
-                          onClick={() => partialUpdatePage({ access: 1 })}
-                          type="button"
-                          className="z-10"
-                        >
+                        <button onClick={() => partialUpdatePage({ access: 1 })} type="button" className="z-10">
                           <LockOpenIcon className="h-4 w-4" />
                         </button>
                       )}
@@ -646,11 +613,7 @@ const SinglePage: NextPage = () => {
                   </DragDropContext>
                   {createBlockForm && (
                     <div className="mt-4" ref={scrollToRef}>
-                      <CreateUpdateBlockInline
-                        handleClose={() => setCreateBlockForm(false)}
-                        focus="name"
-                        user={user}
-                      />
+                      <CreateUpdateBlockInline handleClose={() => setCreateBlockForm(false)} focus="name" user={user} />
                     </div>
                   )}
                   {labelModal && typeof projectId === "string" && (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index f6f8d3d86..ca6745f94 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -8,18 +8,18 @@ import useSWR from "swr";
 // headless ui
 import { Tab } from "@headlessui/react";
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
 import useUserAuth from "hooks/use-user-auth";
 // icons
 import { PlusIcon } from "components/icons";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { RecentPagesList, CreateUpdatePageModal, TPagesListProps } from "components/pages";
 // ui
-import { PrimaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
@@ -31,36 +31,27 @@ import { PROJECT_DETAILS } from "constants/fetch-keys";
 // helper
 import { truncateText } from "helpers/string.helper";
 
-const AllPagesList = dynamic<TPagesListProps>(
-  () => import("components/pages").then((a) => a.AllPagesList),
-  {
-    ssr: false,
-  }
-);
+const AllPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.AllPagesList), {
+  ssr: false,
+});
 
-const FavoritePagesList = dynamic<TPagesListProps>(
-  () => import("components/pages").then((a) => a.FavoritePagesList),
-  {
-    ssr: false,
-  }
-);
+const FavoritePagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.FavoritePagesList), {
+  ssr: false,
+});
 
-const MyPagesList = dynamic<TPagesListProps>(
-  () => import("components/pages").then((a) => a.MyPagesList),
-  {
-    ssr: false,
-  }
-);
+const MyPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.MyPagesList), {
+  ssr: false,
+});
 
-const OtherPagesList = dynamic<TPagesListProps>(
-  () => import("components/pages").then((a) => a.OtherPagesList),
-  {
-    ssr: false,
-  }
-);
+const OtherPagesList = dynamic<TPagesListProps>(() => import("components/pages").then((a) => a.OtherPagesList), {
+  ssr: false,
+});
 
 const tabsList = ["Recent", "All", "Favorites", "Created by me", "Created by others"];
 
+// services
+const projectService = new ProjectService();
+
 const ProjectPages: NextPage = () => {
   const [createUpdatePageModal, setCreateUpdatePageModal] = useState(false);
 
@@ -75,9 +66,7 @@ const ProjectPages: NextPage = () => {
 
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
   );
 
   const currentTabValue = (tab: string | null) => {
@@ -109,22 +98,20 @@ const ProjectPages: NextPage = () => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`}
-            />
+            <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`} />
           </Breadcrumbs>
         }
         right={
-          <PrimaryButton
-            className="flex items-center gap-2"
+          <Button
+            variant="primary"
+            prependIcon={<PlusIcon />}
             onClick={() => {
               const e = new KeyboardEvent("keydown", { key: "d" });
               document.dispatchEvent(e);
             }}
           >
-            <PlusIcon className="h-4 w-4" />
             Create Page
-          </PrimaryButton>
+          </Button>
         }
       >
         <div className="space-y-5 p-8 h-full overflow-hidden flex flex-col">
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index 1f74a74c3..afa2c088e 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -5,9 +5,9 @@ import { useRouter } from "next/router";
 import useSWR, { mutate } from "swr";
 
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 import useProjectDetails from "hooks/use-project-details";
@@ -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;
@@ -52,8 +55,7 @@ const AutomationsSettings: NextPage = () => {
 
     mutate<IProject[]>(
       PROJECTS_LIST(workspaceSlug as string, { is_favorite: "all" }),
-      (prevData) =>
-        (prevData ?? []).map((p) => (p.id === projectDetails.id ? { ...p, ...formData } : p)),
+      (prevData) => (prevData ?? []).map((p) => (p.id === projectDetails.id ? { ...p, ...formData } : p)),
       false
     );
 
@@ -92,16 +94,8 @@ const AutomationsSettings: NextPage = () => {
           <div className="flex items-center py-3.5 border-b border-custom-border-200">
             <h3 className="text-xl font-medium">Automations</h3>
           </div>
-          <AutoArchiveAutomation
-            projectDetails={projectDetails}
-            handleChange={handleChange}
-            disabled={!isAdmin}
-          />
-          <AutoCloseAutomation
-            projectDetails={projectDetails}
-            handleChange={handleChange}
-            disabled={!isAdmin}
-          />
+          <AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />
+          <AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} disabled={!isAdmin} />
         </section>
       </div>
     </ProjectAuthorizationWrapper>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 21e68563a..217fe3d04 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -1,16 +1,12 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
 // services
-import estimatesService from "services/estimates.service";
-import projectService from "services/project.service";
+import { ProjectService, ProjectEstimateService } from "services/project";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates";
 import { SettingsSidebar } from "components/project";
@@ -18,7 +14,8 @@ import { SettingsSidebar } from "components/project";
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // ui
-import { EmptyState, Loader, PrimaryButton, SecondaryButton } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { EmptyState } from "components/common";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -32,6 +29,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 ProjectEstimateService();
+
 const EstimatesSettings: NextPage = () => {
   const [estimateFormOpen, setEstimateFormOpen] = useState(false);
 
@@ -49,7 +50,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
   );
 
@@ -67,15 +68,13 @@ const EstimatesSettings: NextPage = () => {
       false
     );
 
-    estimatesService
-      .deleteEstimate(workspaceSlug as string, projectId as string, estimateId, user)
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Error: Estimate could not be deleted. Please try again",
-        });
+    projectEstimateService.deleteEstimate(workspaceSlug as string, projectId as string, estimateId, user).catch(() => {
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Error: Estimate could not be deleted. Please try again",
       });
+    });
   };
 
   const disableEstimates = () => {
@@ -91,15 +90,13 @@ const EstimatesSettings: NextPage = () => {
       false
     );
 
-    projectService
-      .updateProject(workspaceSlug as string, projectId as string, { estimate: null }, user)
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Estimate could not be disabled. Please try again",
-        })
-      );
+    projectService.updateProject(workspaceSlug as string, projectId as string, { estimate: null }, user).catch(() =>
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Estimate could not be disabled. Please try again",
+      })
+    );
   };
 
   return (
@@ -134,16 +131,19 @@ const EstimatesSettings: NextPage = () => {
               <h3 className="text-xl font-medium">Estimates</h3>
               <div className="col-span-12 space-y-5 sm:col-span-7">
                 <div className="flex items-center gap-2">
-                  <PrimaryButton
+                  <Button
+                    variant="primary"
                     onClick={() => {
                       setEstimateToUpdate(undefined);
                       setEstimateFormOpen(true);
                     }}
                   >
                     Add Estimate
-                  </PrimaryButton>
+                  </Button>
                   {projectDetails?.estimate && (
-                    <SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
+                    <Button variant="neutral-primary" onClick={disableEstimates}>
+                      Disable Estimates
+                    </Button>
                   )}
                 </div>
               </div>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index ba74cf2a5..9e3872c4a 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -1,28 +1,25 @@
 import React from "react";
-
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
 // services
-import projectService from "services/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";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // hooks
 import useToast from "hooks/use-toast";
 import useUserAuth from "hooks/use-user-auth";
 // components
 import { SettingsSidebar } from "components/project";
 // ui
-import { ToggleSwitch } from "components/ui";
+import { ToggleSwitch } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { ModuleIcon } from "components/icons";
 import { FileText, Inbox, Layers } from "lucide-react";
 import { ContrastOutlined } from "@mui/icons-material";
 // types
-import { IProject } from "types";
+import { IProject, IUser } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
@@ -32,39 +29,32 @@ import { truncateText } from "helpers/string.helper";
 const featuresList = [
   {
     title: "Cycles",
-    description:
-      "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
-    icon: (
-      <ContrastOutlined className="!text-base !leading-4 text-purple-500 flex-shrink-0 rotate-180" />
-    ),
+    description: "Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
+    icon: <ContrastOutlined className="!text-base !leading-4 text-purple-500 flex-shrink-0 rotate-180" />,
 
     property: "cycle_view",
   },
   {
     title: "Modules",
-    description:
-      "Modules are enabled for all the projects in this workspace. Access it from the sidebar.",
+    description: "Modules are enabled for all the projects in this workspace. Access it from the sidebar.",
     icon: <ModuleIcon width={16} height={16} className="flex-shrink-0" />,
     property: "module_view",
   },
   {
     title: "Views",
-    description:
-      "Views are enabled for all the projects in this workspace. Access it from the sidebar.",
+    description: "Views are enabled for all the projects in this workspace. Access it from the sidebar.",
     icon: <Layers className="h-4 w-4 text-cyan-500 flex-shrink-0" />,
     property: "issue_views_view",
   },
   {
     title: "Pages",
-    description:
-      "Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
+    description: "Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
     icon: <FileText className="h-4 w-4 text-red-400 flex-shrink-0" />,
     property: "page_view",
   },
   {
     title: "Inbox",
-    description:
-      "Inbox are enabled for all the projects in this workspace. Access it from the issues views page.",
+    description: "Inbox are enabled for all the projects in this workspace. Access it from the issues views page.",
     icon: <Inbox className="h-4 w-4 text-fuchsia-500 flex-shrink-0" />,
     property: "inbox_view",
   },
@@ -87,6 +77,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;
@@ -97,9 +91,7 @@ const FeaturesSettings: NextPage = () => {
 
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
   );
 
   const { data: memberDetails } = useSWR(
@@ -136,15 +128,13 @@ const FeaturesSettings: NextPage = () => {
       message: "Project feature updated successfully.",
     });
 
-    await projectService
-      .updateProject(workspaceSlug as string, projectId as string, formData, user)
-      .catch(() =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Project feature could not be updated. Please try again.",
-        })
-      );
+    await projectService.updateProject(workspaceSlug as string, projectId as string, formData, user).catch(() =>
+      setToastAlert({
+        type: "error",
+        title: "Error!",
+        message: "Project feature could not be updated. Please try again.",
+      })
+    );
   };
 
   const isAdmin = memberDetails?.role === 20;
@@ -182,15 +172,13 @@ const FeaturesSettings: NextPage = () => {
                   </div>
                   <div className="">
                     <h4 className="text-sm font-medium">{feature.title}</h4>
-                    <p className="text-sm text-custom-text-200 tracking-tight">
-                      {feature.description}
-                    </p>
+                    <p className="text-sm text-custom-text-200 tracking-tight">{feature.description}</p>
                   </div>
                 </div>
                 <ToggleSwitch
                   value={projectDetails?.[feature.property as keyof IProject]}
                   onChange={() => {
-                    trackEventServices.trackMiscellaneousEvent(
+                    trackEventService.trackMiscellaneousEvent(
                       {
                         workspaceId: (projectDetails?.workspace as any)?.id,
                         workspaceSlug,
@@ -198,11 +186,8 @@ const FeaturesSettings: NextPage = () => {
                         projectIdentifier: projectDetails?.identifier,
                         projectName: projectDetails?.name,
                       },
-                      getEventType(
-                        feature.title,
-                        !projectDetails?.[feature.property as keyof IProject]
-                      ),
-                      user
+                      getEventType(feature.title, !projectDetails?.[feature.property as keyof IProject]),
+                      user as IUser
                     );
                     handleSubmit({
                       [feature.property]: !projectDetails?.[feature.property as keyof IProject],
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 6fc2f05d8..dbb905ca2 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -1,71 +1,49 @@
-import { useEffect, useState } from "react";
-
+import { useState } from "react";
 import { useRouter } from "next/router";
-
-import useSWR, { mutate } from "swr";
-
-// headless ui
+import useSWR from "swr";
 import { Disclosure, Transition } from "@headlessui/react";
-// react-hook-form
-import { Controller, useForm } from "react-hook-form";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // services
-import projectService from "services/project.service";
+import { ProjectService } from "services/project";
 // components
-import { DeleteProjectModal, SettingsSidebar } from "components/project";
-import { ImagePickerPopover } from "components/core";
-import EmojiIconPicker from "components/emoji-icon-picker";
-// hooks
-import useToast from "hooks/use-toast";
-import useUserAuth from "hooks/use-user-auth";
-// ui
-import {
-  Input,
-  TextArea,
-  Loader,
-  CustomSelect,
-  DangerButton,
-  Icon,
-  PrimaryButton,
-} from "components/ui";
+import { DeleteProjectModal, ProjectDetailsForm, ProjectDetailsFormLoader, SettingsSidebar } from "components/project";
+// components
+import { Button, Loader } from "@plane/ui";
+import { Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
-import { renderEmoji } from "helpers/emoji.helper";
 import { truncateText } from "helpers/string.helper";
-import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
 // types
-import { IProject, IWorkspace } from "types";
 import type { NextPage } from "next";
 // fetch-keys
-import { PROJECTS_LIST, PROJECT_DETAILS, USER_PROJECT_VIEW } from "constants/fetch-keys";
-// constants
-import { NETWORK_CHOICES } from "constants/project";
+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 = () => {
+const GeneralSettings: NextPage = observer(() => {
+  const { project: projectStore } = useMobxStore();
+  // states
   const [selectProject, setSelectedProject] = useState<string | null>(null);
-
-  const { user } = useUserAuth();
-
-  const { setToastAlert } = useToast();
-
+  // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
-
-  const { data: projectDetails } = useSWR<IProject>(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+  // derived values
+  const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
+  console.log("projectDetails", projectDetails);
+  console.log("condition", workspaceSlug && projectId && !projectDetails);
+  console.log("wow", projectId);
+  // api call to fetch project details
+  useSWR(
+    workspaceSlug && projectId ? "PROJECT_DETAILS" : null,
     workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
       : null
   );
-
+  // API call to fetch user privileges
   const { data: memberDetails } = useSWR(
     workspaceSlug && projectId ? USER_PROJECT_VIEW(projectId.toString()) : null,
     workspaceSlug && projectId
@@ -73,101 +51,8 @@ const GeneralSettings: NextPage = () => {
       : null
   );
 
-  const {
-    register,
-    handleSubmit,
-    reset,
-    watch,
-    control,
-    setValue,
-    setError,
-    formState: { errors, isSubmitting },
-  } = useForm<IProject>({
-    defaultValues,
-  });
-
-  useEffect(() => {
-    if (projectDetails)
-      reset({
-        ...projectDetails,
-        emoji_and_icon: projectDetails.emoji ?? projectDetails.icon_prop,
-        workspace: (projectDetails.workspace as IWorkspace).id,
-      });
-  }, [projectDetails, reset]);
-
-  const updateProject = async (payload: Partial<IProject>) => {
-    if (!workspaceSlug || !projectDetails) return;
-
-    await projectService
-      .updateProject(workspaceSlug as string, projectDetails.id, payload, user)
-      .then((res) => {
-        mutate<IProject>(
-          PROJECT_DETAILS(projectDetails.id),
-          (prevData) => ({ ...prevData, ...res }),
-          false
-        );
-
-        mutate(
-          PROJECTS_LIST(workspaceSlug as string, {
-            is_favorite: "all",
-          })
-        );
-
-        setToastAlert({
-          type: "success",
-          title: "Success!",
-          message: "Project updated successfully",
-        });
-      })
-      .catch(() => {
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message: "Project could not be updated. Please try again.",
-        });
-      });
-  };
-
-  const onSubmit = async (formData: IProject) => {
-    if (!workspaceSlug || !projectDetails) return;
-
-    const payload: Partial<IProject> = {
-      name: formData.name,
-      network: formData.network,
-      identifier: formData.identifier,
-      description: formData.description,
-      cover_image: formData.cover_image,
-    };
-
-    if (typeof formData.emoji_and_icon === "object") {
-      payload.emoji = null;
-      payload.icon_prop = formData.emoji_and_icon;
-    } else {
-      payload.emoji = formData.emoji_and_icon;
-      payload.icon_prop = null;
-    }
-
-    if (projectDetails.identifier !== formData.identifier)
-      await projectService
-        .checkProjectIdentifierAvailability(workspaceSlug as string, payload.identifier ?? "")
-        .then(async (res) => {
-          if (res.exists) setError("identifier", { message: "Identifier already exists" });
-          else await updateProject(payload);
-        });
-    else await updateProject(payload);
-  };
-
-  const handleIdentifierChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { value } = event.target;
-
-    const alphanumericValue = value.replace(/[^a-zA-Z0-9]/g, "");
-    const formattedValue = alphanumericValue.toUpperCase();
-
-    setValue("identifier", formattedValue);
-  };
-
-  const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network);
-  const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
+  // const currentNetwork = NETWORK_CHOICES.find((n) => n.key === projectDetails?.network);
+  // const selectedNetwork = NETWORK_CHOICES.find((n) => n.key === watch("network"));
 
   const isAdmin = memberDetails?.role === 20;
 
@@ -184,269 +69,78 @@ const GeneralSettings: NextPage = () => {
         </Breadcrumbs>
       }
     >
-      <DeleteProjectModal
-        data={projectDetails ?? null}
-        isOpen={Boolean(selectProject)}
-        onClose={() => setSelectedProject(null)}
-        user={user}
-      />
+      {projectDetails && (
+        <DeleteProjectModal
+          project={projectDetails}
+          isOpen={Boolean(selectProject)}
+          onClose={() => setSelectedProject(null)}
+        />
+      )}
+
       <div className="flex flex-row gap-2 h-full">
         <div className="w-80 pt-8 overflow-y-hidden flex-shrink-0">
           <SettingsSidebar />
         </div>
         <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
-          <form onSubmit={handleSubmit(onSubmit)}>
-            <div className="relative h-44 w-full mt-6">
-              <img
-                src={watch("cover_image")!}
-                alt={watch("cover_image")!}
-                className="h-44 w-full rounded-md object-cover"
-              />
-              <div className="flex items-end justify-between gap-3 absolute bottom-4 w-full px-4">
-                <div className="flex gap-3 flex-grow truncate">
-                  <div className="flex items-center justify-center flex-shrink-0 bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
-                    {projectDetails ? (
-                      <div className="h-7 w-7 grid place-items-center">
-                        <Controller
-                          control={control}
-                          name="emoji_and_icon"
-                          render={({ field: { value, onChange } }) => (
-                            <EmojiIconPicker
-                              label={value ? renderEmoji(value) : "Icon"}
-                              value={value}
-                              onChange={onChange}
-                              disabled={!isAdmin}
-                            />
+          {projectDetails && workspaceSlug ? (
+            <ProjectDetailsForm project={projectDetails} workspaceSlug={workspaceSlug.toString()} isAdmin={isAdmin} />
+          ) : (
+            <ProjectDetailsFormLoader />
+          )}
+
+          {isAdmin && (
+            <Disclosure as="div" className="border-t border-custom-border-400">
+              {({ open }) => (
+                <div className="w-full">
+                  <Disclosure.Button
+                    as="button"
+                    type="button"
+                    className="flex items-center justify-between w-full py-4"
+                  >
+                    <span className="text-xl tracking-tight">Delete Project</span>
+                    <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" />
+                  </Disclosure.Button>
+
+                  <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>
+                      <div className="flex flex-col gap-8">
+                        <span className="text-sm tracking-tight">
+                          The danger zone of the project delete page is a critical area that requires careful
+                          consideration and attention. When deleting a project, all of the data and resources within
+                          that project will be permanently removed and cannot be recovered.
+                        </span>
+                        <div>
+                          {projectDetails ? (
+                            <div>
+                              <Button variant="danger" onClick={() => setSelectedProject(projectDetails.id ?? null)}>
+                                Delete my project
+                              </Button>
+                            </div>
+                          ) : (
+                            <Loader className="mt-2 w-full">
+                              <Loader.Item height="38px" width="144px" />
+                            </Loader>
                           )}
-                        />
-                      </div>
-                    ) : (
-                      <Loader>
-                        <Loader.Item height="46px" width="46px" />
-                      </Loader>
-                    )}
-                  </div>
-                  <div className="flex flex-col gap-1 text-white truncate">
-                    <span className="text-lg font-semibold truncate">{watch("name")}</span>
-                    <span className="flex items-center gap-2 text-sm">
-                      <span>
-                        {watch("identifier")} . {currentNetwork?.label}
-                      </span>
-                    </span>
-                  </div>
-                </div>
-
-                <div className="flex justify-center flex-shrink-0">
-                  {projectDetails ? (
-                    <div>
-                      <Controller
-                        control={control}
-                        name="cover_image"
-                        render={({ field: { value, onChange } }) => (
-                          <ImagePickerPopover
-                            label={"Change cover"}
-                            onChange={(imageUrl) => {
-                              setValue("cover_image", imageUrl);
-                            }}
-                            value={watch("cover_image")}
-                            disabled={!isAdmin}
-                          />
-                        )}
-                      />
-                    </div>
-                  ) : (
-                    <Loader>
-                      <Loader.Item height="32px" width="108px" />
-                    </Loader>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            <div className="flex flex-col gap-8 my-8">
-              <div className="flex flex-col gap-1">
-                <h4 className="text-sm">Project Name</h4>
-                {projectDetails ? (
-                  <Input
-                    id="name"
-                    name="name"
-                    error={errors.name}
-                    register={register}
-                    className="!p-3 rounded-md font-medium"
-                    placeholder="Project Name"
-                    validations={{
-                      required: "Name is required",
-                    }}
-                    disabled={!isAdmin}
-                  />
-                ) : (
-                  <Loader>
-                    <Loader.Item height="46px" width="100%" />
-                  </Loader>
-                )}
-              </div>
-
-              <div className="flex flex-col gap-1">
-                <h4 className="text-sm">Description</h4>
-                {projectDetails ? (
-                  <TextArea
-                    id="description"
-                    name="description"
-                    error={errors.description}
-                    register={register}
-                    placeholder="Enter project description"
-                    validations={{}}
-                    className="min-h-[102px] text-sm"
-                    disabled={!isAdmin}
-                  />
-                ) : (
-                  <Loader className="w-full">
-                    <Loader.Item height="102px" width="full" />
-                  </Loader>
-                )}
-              </div>
-
-              <div className="flex items-center justify-between gap-10 w-full">
-                <div className="flex flex-col gap-1 w-1/2">
-                  <h4 className="text-sm">Identifier</h4>
-                  {projectDetails ? (
-                    <Input
-                      id="identifier"
-                      name="identifier"
-                      error={errors.identifier}
-                      register={register}
-                      placeholder="Enter identifier"
-                      onChange={handleIdentifierChange}
-                      validations={{
-                        required: "Identifier is required",
-                        validate: (value) =>
-                          /^[A-Z0-9]+$/.test(value.toUpperCase()) ||
-                          "Identifier must be in uppercase.",
-                        minLength: {
-                          value: 1,
-                          message: "Identifier must at least be of 1 character",
-                        },
-                        maxLength: {
-                          value: 5,
-                          message: "Identifier must at most be of 5 characters",
-                        },
-                      }}
-                      disabled={!isAdmin}
-                    />
-                  ) : (
-                    <Loader>
-                      <Loader.Item height="36px" width="100%" />
-                    </Loader>
-                  )}
-                </div>
-
-                <div className="flex flex-col gap-1 w-1/2">
-                  <h4 className="text-sm">Network</h4>
-                  {projectDetails ? (
-                    <Controller
-                      name="network"
-                      control={control}
-                      render={({ field: { value, onChange } }) => (
-                        <CustomSelect
-                          value={value}
-                          onChange={onChange}
-                          label={selectedNetwork?.label ?? "Select network"}
-                          className="!border-custom-border-200 !shadow-none"
-                          input
-                          disabled={!isAdmin}
-                        >
-                          {NETWORK_CHOICES.map((network) => (
-                            <CustomSelect.Option key={network.key} value={network.key}>
-                              {network.label}
-                            </CustomSelect.Option>
-                          ))}
-                        </CustomSelect>
-                      )}
-                    />
-                  ) : (
-                    <Loader className="w-full">
-                      <Loader.Item height="46px" width="100%" />
-                    </Loader>
-                  )}
-                </div>
-              </div>
-
-              <div className="flex items-center justify-between py-2">
-                {projectDetails ? (
-                  <>
-                    <PrimaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
-                      {isSubmitting ? "Updating Project..." : "Update Project"}
-                    </PrimaryButton>
-                    <span className="text-sm text-custom-sidebar-text-400 italic">
-                      Created on {renderShortDateWithYearFormat(projectDetails?.created_at)}
-                    </span>
-                  </>
-                ) : (
-                  <Loader className="mt-2 w-full">
-                    <Loader.Item height="34px" width="100px" />
-                  </Loader>
-                )}
-              </div>
-            </div>
-            {isAdmin && (
-              <Disclosure as="div" className="border-t border-custom-border-400">
-                {({ open }) => (
-                  <div className="w-full">
-                    <Disclosure.Button
-                      as="button"
-                      type="button"
-                      className="flex items-center justify-between w-full py-4"
-                    >
-                      <span className="text-xl tracking-tight">Delete Project</span>
-                      <Icon iconName={open ? "expand_less" : "expand_more"} className="!text-2xl" />
-                    </Disclosure.Button>
-
-                    <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>
-                        <div className="flex flex-col gap-8">
-                          <span className="text-sm tracking-tight">
-                            The danger zone of the project delete page is a critical area that
-                            requires careful consideration and attention. When deleting a project,
-                            all of the data and resources within that project will be permanently
-                            removed and cannot be recovered.
-                          </span>
-                          <div>
-                            {projectDetails ? (
-                              <div>
-                                <DangerButton
-                                  onClick={() => setSelectedProject(projectDetails.id ?? null)}
-                                  className="!text-sm"
-                                  outline
-                                >
-                                  Delete my project
-                                </DangerButton>
-                              </div>
-                            ) : (
-                              <Loader className="mt-2 w-full">
-                                <Loader.Item height="38px" width="144px" />
-                              </Loader>
-                            )}
-                          </div>
                         </div>
-                      </Disclosure.Panel>
-                    </Transition>
-                  </div>
-                )}
-              </Disclosure>
-            )}
-          </form>
+                      </div>
+                    </Disclosure.Panel>
+                  </Transition>
+                </div>
+              )}
+            </Disclosure>
+          )}
         </div>
       </div>
     </ProjectAuthorizationWrapper>
   );
-};
+});
 
 export default GeneralSettings;
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index 181c9f8ec..f124a88c4 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -5,17 +5,16 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // services
-import IntegrationService from "services/integration";
-import projectService from "services/project.service";
+import { IntegrationService } from "services/integrations";
+import { ProjectService } from "services/project";
 // components
 import { SettingsSidebar, SingleIntegration } from "components/project";
 // ui
-import { EmptyState, IntegrationAndImportExportBanner, Loader } from "components/ui";
+import { EmptyState } from "components/common";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-// icons
-import { PlusIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
+import { Loader } from "@plane/ui";
 // images
 import emptyIntegration from "public/empty-state/integration.svg";
 // types
@@ -26,23 +25,22 @@ 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;
 
   const { data: projectDetails } = useSWR<IProject>(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
   );
 
   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(
@@ -79,10 +77,7 @@ const ProjectIntegrations: NextPage = () => {
             workspaceIntegrations.length > 0 ? (
               <div>
                 {workspaceIntegrations.map((integration) => (
-                  <SingleIntegration
-                    key={integration.integration_detail.id}
-                    integration={integration}
-                  />
+                  <SingleIntegration key={integration.integration_detail.id} integration={integration} />
                 ))}
               </div>
             ) : (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 13b290152..a9627e703 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -7,10 +7,10 @@ import useSWR from "swr";
 // hooks
 import useUserAuth from "hooks/use-user-auth";
 // services
-import projectService from "services/project.service";
-import issuesService from "services/issues.service";
+import { ProjectService } from "services/project";
+import { IssueLabelService } from "services/issue";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import {
   CreateUpdateLabelInline,
@@ -21,10 +21,9 @@ import {
 } from "components/labels";
 import { SettingsSidebar } from "components/project";
 // ui
-import { EmptyState, Loader, PrimaryButton } from "components/ui";
+import { Button, Loader } from "@plane/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
@@ -35,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);
@@ -59,15 +62,13 @@ const LabelsSettings: NextPage = () => {
 
   const { data: projectDetails } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
   );
 
   const { data: issueLabels } = useSWR(
     workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
     workspaceSlug && projectId
-      ? () => issuesService.getIssueLabels(workspaceSlug as string, projectId as string)
+      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -121,13 +122,9 @@ const LabelsSettings: NextPage = () => {
             <div className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200">
               <h3 className="text-xl font-medium">Labels</h3>
 
-              <PrimaryButton
-                onClick={newLabel}
-                size="sm"
-                className="flex items-center justify-center"
-              >
+              <Button variant="primary" onClick={newLabel} size="sm">
                 Add label
-              </PrimaryButton>
+              </Button>
             </div>
             <div className="space-y-3 py-6 h-full w-full">
               {labelForm && (
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 1e1aae9d6..e4459ca32 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -1,13 +1,10 @@
 import { useState, useEffect } from "react";
-
 import { useRouter } from "next/router";
 import Link from "next/link";
-
 import useSWR, { mutate } from "swr";
-
 // services
-import projectService from "services/project.service";
-import workspaceService from "services/workspace.service";
+import { ProjectService, ProjectInvitationService } from "services/project";
+import { WorkspaceService } from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 import useUser from "hooks/use-user";
@@ -15,24 +12,17 @@ import useProjectMembers from "hooks/use-project-members";
 import useProjectDetails from "hooks/use-project-details";
 import { Controller, useForm } from "react-hook-form";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
 import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
 import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
 import { MemberSelect, SettingsSidebar } from "components/project";
 // ui
-import {
-  CustomMenu,
-  CustomSearchSelect,
-  CustomSelect,
-  Icon,
-  Loader,
-  PrimaryButton,
-  SecondaryButton,
-} from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { CustomMenu, CustomSelect, Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
-import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { XMarkIcon } from "@heroicons/react/24/outline";
 // types
 import type { NextPage } from "next";
 import { IProject, IUserLite, IWorkspace } from "types";
@@ -41,7 +31,6 @@ import {
   PROJECTS_LIST,
   PROJECT_DETAILS,
   PROJECT_INVITATIONS_WITH_EMAIL,
-  PROJECT_MEMBERS,
   PROJECT_MEMBERS_WITH_EMAIL,
   USER_PROJECT_VIEW,
   WORKSPACE_DETAILS,
@@ -56,6 +45,11 @@ const defaultValues: Partial<IProject> = {
   default_assignee: null,
 };
 
+// services
+const projectService = new ProjectService();
+const projectInvitationService = new ProjectInvitationService();
+const workspaceService = new WorkspaceService();
+
 const MembersSettings: NextPage = () => {
   const [inviteModal, setInviteModal] = useState(false);
   const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
@@ -74,41 +68,23 @@ const MembersSettings: NextPage = () => {
     Boolean(workspaceSlug && projectId)
   );
 
-  const {
-    handleSubmit,
-    reset,
-    control,
-    formState: { isSubmitting },
-  } = useForm<IProject>({ defaultValues });
+  const { reset, control } = useForm<IProject>({ defaultValues });
 
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
-  );
-
-  const { data: people } = useSWR(
-    workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
-      : null
+  const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
+    workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
   );
 
   const { data: projectMembers, mutate: mutateMembers } = useSWR(
-    workspaceSlug && projectId
-      ? PROJECT_MEMBERS_WITH_EMAIL(workspaceSlug.toString(), projectId.toString())
-      : null,
+    workspaceSlug && projectId ? PROJECT_MEMBERS_WITH_EMAIL(workspaceSlug.toString(), projectId.toString()) : null,
     workspaceSlug && projectId
       ? () => projectService.projectMembersWithEmail(workspaceSlug as string, projectId as string)
       : null
   );
 
   const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
+    workspaceSlug && projectId ? PROJECT_INVITATIONS_WITH_EMAIL(workspaceSlug.toString(), projectId.toString()) : null,
     workspaceSlug && projectId
-      ? PROJECT_INVITATIONS_WITH_EMAIL(workspaceSlug.toString(), projectId.toString())
-      : null,
-    workspaceSlug && projectId
-      ? () =>
-          projectService.projectInvitationsWithEmail(workspaceSlug as string, projectId as string)
+      ? () => projectInvitationService.projectInvitationsWithEmail(workspaceSlug as string, projectId as string)
       : null
   );
 
@@ -148,37 +124,37 @@ const MembersSettings: NextPage = () => {
 
   const currentUser = projectMembers?.find((item) => item.member.id === user?.id);
 
-  const handleProjectInvitationSuccess = () => {};
+  // const handleProjectInvitationSuccess = () => {};
 
-  const onSubmit = async (formData: IProject) => {
-    if (!workspaceSlug || !projectId || !projectDetails) return;
+  // const onSubmit = async (formData: IProject) => {
+  //   if (!workspaceSlug || !projectId || !projectDetails) return;
 
-    const payload: Partial<IProject> = {
-      default_assignee: formData.default_assignee,
-      project_lead: formData.project_lead === "none" ? null : formData.project_lead,
-    };
+  //   const payload: Partial<IProject> = {
+  //     default_assignee: formData.default_assignee,
+  //     project_lead: formData.project_lead === "none" ? null : formData.project_lead,
+  //   };
 
-    await projectService
-      .updateProject(workspaceSlug as string, projectId as string, payload, user)
-      .then((res) => {
-        mutate(PROJECT_DETAILS(projectId as string));
+  //   await projectService
+  //     .updateProject(workspaceSlug as string, projectId as string, payload, user)
+  //     .then((res) => {
+  //       mutate(PROJECT_DETAILS(projectId as string));
 
-        mutate(
-          PROJECTS_LIST(workspaceSlug as string, {
-            is_favorite: "all",
-          })
-        );
+  //       mutate(
+  //         PROJECTS_LIST(workspaceSlug as string, {
+  //           is_favorite: "all",
+  //         })
+  //       );
 
-        setToastAlert({
-          title: "Success",
-          type: "success",
-          message: "Project updated successfully",
-        });
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  };
+  //       setToastAlert({
+  //         title: "Success",
+  //         type: "success",
+  //         message: "Project updated successfully",
+  //       });
+  //     })
+  //     .catch((err) => {
+  //       console.log(err);
+  //     });
+  // };
 
   useEffect(() => {
     if (projectDetails)
@@ -200,7 +176,7 @@ const MembersSettings: NextPage = () => {
 
     await projectService
       .updateProject(workspaceSlug as string, projectId as string, payload, user)
-      .then((res) => {
+      .then(() => {
         mutate(PROJECT_DETAILS(projectId as string));
 
         mutate(
@@ -241,31 +217,21 @@ const MembersSettings: NextPage = () => {
           setSelectedRemoveMember(null);
           setSelectedInviteRemoveMember(null);
         }}
-        data={members.find(
-          (item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember
-        )}
+        data={members.find((item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember)}
         handleDelete={async () => {
           if (!activeWorkspace || !projectDetails) return;
           if (selectedRemoveMember) {
-            await projectService.deleteProjectMember(
-              activeWorkspace.slug,
-              projectDetails.id,
-              selectedRemoveMember
-            );
-            mutateMembers(
-              (prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
-              false
-            );
+            await projectService.deleteProjectMember(activeWorkspace.slug, projectDetails.id, selectedRemoveMember);
+            mutateMembers((prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember), false);
           }
           if (selectedInviteRemoveMember) {
-            await projectService.deleteProjectInvitation(
+            await projectInvitationService.deleteProjectInvitation(
               activeWorkspace.slug,
               projectDetails.id,
               selectedInviteRemoveMember
             );
             mutateInvitations(
-              (prevData: any) =>
-                prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
+              (prevData: any) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
               false
             );
           }
@@ -347,7 +313,9 @@ const MembersSettings: NextPage = () => {
 
           <div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
             <h4 className="text-xl font-medium">Members</h4>
-            <PrimaryButton onClick={() => setInviteModal(true)}>Add Member</PrimaryButton>
+            <Button variant="primary" onClick={() => setInviteModal(true)}>
+              Add Member
+            </Button>
           </div>
           {!projectMembers || !projectInvitations ? (
             <Loader className="space-y-5">
@@ -360,10 +328,7 @@ const MembersSettings: NextPage = () => {
             <div className="divide-y divide-custom-border-200">
               {members.length > 0
                 ? members.map((member) => (
-                    <div
-                      key={member.id}
-                      className="flex items-center justify-between px-3.5 py-[18px]"
-                    >
+                    <div key={member.id} className="flex items-center justify-between px-3.5 py-[18px]">
                       <div className="flex items-center gap-x-6 gap-y-2">
                         {member.avatar && member.avatar !== "" ? (
                           <div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
@@ -389,19 +354,13 @@ const MembersSettings: NextPage = () => {
                                 <span>
                                   {member.first_name} {member.last_name}
                                 </span>
-                                <span className="text-custom-text-300 text-sm ml-2">
-                                  ({member.display_name})
-                                </span>
+                                <span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
                               </a>
                             </Link>
                           ) : (
                             <h4 className="text-sm">{member.display_name || member.email}</h4>
                           )}
-                          {isOwner && (
-                            <p className="mt-0.5 text-xs text-custom-sidebar-text-300">
-                              {member.email}
-                            </p>
-                          )}
+                          {isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
                         </div>
                       </div>
                       <div className="flex items-center gap-3 text-xs">
@@ -431,45 +390,30 @@ const MembersSettings: NextPage = () => {
 
                             mutateMembers(
                               (prevData: any) =>
-                                prevData.map((m: any) =>
-                                  m.id === member.id ? { ...m, role: value } : m
-                                ),
+                                prevData.map((m: any) => (m.id === member.id ? { ...m, role: value } : m)),
                               false
                             );
 
                             projectService
-                              .updateProjectMember(
-                                activeWorkspace.slug,
-                                projectDetails.id,
-                                member.id,
-                                {
-                                  role: value,
-                                }
-                              )
+                              .updateProjectMember(activeWorkspace.slug, projectDetails.id, member.id, {
+                                role: value,
+                              })
                               .catch(() => {
                                 setToastAlert({
                                   type: "error",
                                   title: "Error!",
-                                  message:
-                                    "An error occurred while updating member role. Please try again.",
+                                  message: "An error occurred while updating member role. Please try again.",
                                 });
                               });
                           }}
                           disabled={
                             member.memberId === user?.id ||
                             !member.member ||
-                            (currentUser &&
-                              currentUser.role !== 20 &&
-                              currentUser.role < member.role)
+                            (currentUser && currentUser.role !== 20 && currentUser.role < member.role)
                           }
                         >
                           {Object.keys(ROLE).map((key) => {
-                            if (
-                              currentUser &&
-                              currentUser.role !== 20 &&
-                              currentUser.role < parseInt(key)
-                            )
-                              return null;
+                            if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null;
 
                             return (
                               <CustomSelect.Option key={key} value={key}>
@@ -488,10 +432,7 @@ const MembersSettings: NextPage = () => {
                             <span className="flex items-center justify-start gap-2">
                               <XMarkIcon className="h-4 w-4" />
 
-                              <span>
-                                {" "}
-                                {member.memberId !== user?.id ? "Remove member" : "Leave project"}
-                              </span>
+                              <span> {member.memberId !== user?.id ? "Remove member" : "Leave project"}</span>
                             </span>
                           </CustomMenu.MenuItem>
                         </CustomMenu>
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 88be296c4..0da70905a 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -5,22 +5,17 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import stateService from "services/state.service";
+import { ProjectStateService } from "services/project";
 // hooks
 import useProjectDetails from "hooks/use-project-details";
 import useUserAuth from "hooks/use-user-auth";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
-import {
-  CreateUpdateStateInline,
-  DeleteStateModal,
-  SingleState,
-  StateGroup,
-} from "components/states";
+import { CreateUpdateStateInline, DeleteStateModal, SingleState, StateGroup } from "components/states";
 import { SettingsSidebar } from "components/project";
 // ui
-import { Loader } from "components/ui";
+import { Loader } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { PlusIcon } from "@heroicons/react/24/outline";
@@ -32,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);
@@ -47,7 +45,7 @@ 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)
+      ? () => projectStateService.getStates(workspaceSlug as string, projectId as string)
       : null
   );
   const orderedStateGroups = orderStateGroups(states);
@@ -88,9 +86,7 @@ const StatesSettings: NextPage = () => {
                     return (
                       <div key={key} className="flex flex-col gap-2">
                         <div className="flex w-full justify-between">
-                          <h4 className="text-base font-medium text-custom-text-200 capitalize">
-                            {key}
-                          </h4>
+                          <h4 className="text-base font-medium text-custom-text-200 capitalize">{key}</h4>
                           <button
                             type="button"
                             className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
@@ -124,19 +120,14 @@ const StatesSettings: NextPage = () => {
                                 user={user}
                               />
                             ) : (
-                              <div
-                                className="border-b border-custom-border-200 last:border-b-0"
-                                key={state.id}
-                              >
+                              <div className="border-b border-custom-border-200 last:border-b-0" key={state.id}>
                                 <CreateUpdateStateInline
                                   onClose={() => {
                                     setActiveGroup(null);
                                     setSelectedState(null);
                                   }}
                                   groupLength={orderedStateGroups[key].length}
-                                  data={
-                                    statesList?.find((state) => state.id === selectedState) ?? null
-                                  }
+                                  data={statesList?.find((state) => state.id === selectedState) ?? null}
                                   selectedGroup={key as keyof StateGroup}
                                   user={user}
                                 />
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
index 3597f113f..8623bdda6 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
@@ -3,19 +3,17 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import projectService from "services/project.service";
-import viewsService from "services/views.service";
+import { ProjectService } from "services/project";
+import { ViewService } from "services/view.service";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
-// contexts
-import { IssueViewContextProvider } from "contexts/issue-view.context";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
 // components
-import { IssuesFilterView, IssuesView } from "components/core";
+import { ProjectViewLayoutRoot } from "components/issues";
 // ui
-import { CustomMenu, EmptyState, PrimaryButton } from "components/ui";
+import { CustomMenu } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { EmptyState } from "components/common";
 // icons
-import { PlusIcon } from "@heroicons/react/24/outline";
 import { StackedLayersIcon } from "components/icons";
 // images
 import emptyView from "public/empty-state/view.svg";
@@ -23,6 +21,11 @@ import emptyView from "public/empty-state/view.svg";
 import { truncateText } from "helpers/string.helper";
 // fetch-keys
 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();
@@ -30,96 +33,69 @@ const SingleView: React.FC = () => {
 
   const { data: activeProject } = useSWR(
     workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
-    workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
-      : null
+    workspaceSlug && projectId ? () => projectService.getProject(workspaceSlug as string, projectId as string) : null
   );
 
   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
   );
 
   return (
-    <IssueViewContextProvider>
-      <ProjectAuthorizationWrapper
-        breadcrumbs={
-          <Breadcrumbs>
-            <BreadcrumbItem
-              title={`${activeProject?.name ?? "Project"} Views`}
-              link={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}
-            />
-          </Breadcrumbs>
-        }
-        left={
-          <CustomMenu
-            label={
-              <>
-                <StackedLayersIcon height={12} width={12} />
-                {viewDetails?.name && truncateText(viewDetails.name, 40)}
-              </>
-            }
-            className="ml-1.5"
-            width="auto"
-          >
-            {views?.map((view) => (
-              <CustomMenu.MenuItem
-                key={view.id}
-                renderAs="a"
-                href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}
-              >
-                {truncateText(view.name, 40)}
-              </CustomMenu.MenuItem>
-            ))}
-          </CustomMenu>
-        }
-        right={
-          <div className="flex items-center gap-2">
-            <IssuesFilterView />
-            <PrimaryButton
-              className="flex items-center gap-2"
-              onClick={() => {
-                const e = new KeyboardEvent("keydown", { key: "c" });
-                document.dispatchEvent(e);
-              }}
-            >
-              <PlusIcon className="h-4 w-4" />
-              Add Issue
-            </PrimaryButton>
-          </div>
-        }
-      >
-        {error ? (
-          <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}/projects/${projectId}/views`),
-            }}
+    <ProjectAuthorizationWrapper
+      breadcrumbs={
+        <Breadcrumbs>
+          <BreadcrumbItem
+            title={`${activeProject?.name ?? "Project"} Views`}
+            link={`/${workspaceSlug}/projects/${activeProject?.id}/cycles`}
           />
-        ) : (
-          <div className="h-full w-full flex flex-col">
-            <IssuesView />
-          </div>
-        )}
-      </ProjectAuthorizationWrapper>
-    </IssueViewContextProvider>
+        </Breadcrumbs>
+      }
+      left={
+        <CustomMenu
+          label={
+            <>
+              <StackedLayersIcon height={12} width={12} />
+              {viewDetails?.name && truncateText(viewDetails.name, 40)}
+            </>
+          }
+          className="ml-1.5"
+          width="auto"
+        >
+          {views?.map((view) => (
+            <CustomMenu.MenuItem
+              key={view.id}
+              renderAs="a"
+              href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}
+            >
+              {truncateText(view.name, 40)}
+            </CustomMenu.MenuItem>
+          ))}
+        </CustomMenu>
+      }
+      right={<ProjectViewIssuesHeader />}
+    >
+      {error ? (
+        <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}/projects/${projectId}/views`),
+          }}
+        />
+      ) : (
+        <ProjectViewLayoutRoot />
+      )}
+    </ProjectAuthorizationWrapper>
   );
 };
 
diff --git a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
index 9a5511037..6bb245e2d 100644
--- a/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/[projectId]/views/index.tsx
@@ -1,142 +1,58 @@
-import React, { useState } from "react";
+import React from "react";
 
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-// services
-import viewsService from "services/views.service";
-import projectService from "services/project.service";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
 // layouts
-import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
+import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
+// components
+import { ProjectViewsHeader } from "components/headers";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
-//icons
-import { PlusIcon } from "components/icons";
-// images
-import emptyView from "public/empty-state/view.svg";
-// fetching keys
-import { PROJECT_DETAILS, VIEWS_LIST } from "constants/fetch-keys";
 // components
-import { PrimaryButton, Loader, EmptyState } from "components/ui";
-import { DeleteViewModal, CreateUpdateViewModal, SingleViewItem } from "components/views";
+import { ProjectViewsList } from "components/views";
 // types
-import { IView } from "types";
 import type { NextPage } from "next";
 
 const ProjectViews: NextPage = () => {
-  const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
-  const [selectedViewToUpdate, setSelectedViewToUpdate] = useState<IView | null>(null);
-
-  const [deleteViewModal, setDeleteViewModal] = useState(false);
-  const [selectedViewToDelete, setSelectedViewToDelete] = useState<IView | null>(null);
-
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
 
-  const { user } = useUserAuth();
+  const { project: projectStore, projectViews: projectViewsStore } = useMobxStore();
 
-  const { data: activeProject } = useSWR(
-    workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_DETAILS_${projectId.toString()}` : null,
     workspaceSlug && projectId
-      ? () => projectService.getProject(workspaceSlug as string, projectId as string)
+      ? () => projectStore.fetchProjectDetails(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
-  const { data: views } = useSWR(
-    workspaceSlug && projectId ? VIEWS_LIST(projectId as string) : null,
+  useSWR(
+    workspaceSlug && projectId ? `PROJECT_VIEWS_LIST_${workspaceSlug.toString()}_${projectId.toString()}` : null,
     workspaceSlug && projectId
-      ? () => viewsService.getViews(workspaceSlug as string, projectId as string)
+      ? () => projectViewsStore.fetchAllViews(workspaceSlug.toString(), projectId.toString())
       : null
   );
 
-  const handleEditView = (view: IView) => {
-    setSelectedViewToUpdate(view);
-    setCreateUpdateViewModal(true);
-  };
-
-  const handleDeleteView = (view: IView) => {
-    setSelectedViewToDelete(view);
-    setDeleteViewModal(true);
-  };
+  const projectDetails =
+    workspaceSlug && projectId
+      ? projectStore.getProjectById(workspaceSlug.toString(), projectId.toString())
+      : undefined;
 
   return (
     <ProjectAuthorizationWrapper
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Views`} />
+          <BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Views`} />
         </Breadcrumbs>
       }
-      right={
-        <div className="flex items-center gap-2">
-          <PrimaryButton
-            type="button"
-            className="flex items-center gap-2"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "v" });
-              document.dispatchEvent(e);
-            }}
-          >
-            <PlusIcon className="h-4 w-4" />
-            Create View
-          </PrimaryButton>
-        </div>
-      }
+      right={<ProjectViewsHeader />}
     >
-      <CreateUpdateViewModal
-        isOpen={createUpdateViewModal}
-        handleClose={() => setCreateUpdateViewModal(false)}
-        data={selectedViewToUpdate}
-        user={user}
-      />
-      <DeleteViewModal
-        isOpen={deleteViewModal}
-        data={selectedViewToDelete}
-        setIsOpen={setDeleteViewModal}
-        user={user}
-      />
-      {views ? (
-        views.length > 0 ? (
-          <div className="space-y-5 p-8">
-            <h3 className="text-2xl font-semibold text-custom-text-100">Views</h3>
-            <div className="divide-y divide-custom-border-200 rounded-[10px] border border-custom-border-200">
-              {views.map((view) => (
-                <SingleViewItem
-                  key={view.id}
-                  view={view}
-                  handleEditView={() => handleEditView(view)}
-                  handleDeleteView={() => handleDeleteView(view)}
-                />
-              ))}
-            </div>
-          </div>
-        ) : (
-          <EmptyState
-            title="Get focused with views"
-            description="Views aid in saving your issues by applying various filters and grouping options."
-            image={emptyView}
-            primaryButton={{
-              icon: <PlusIcon className="h-4 w-4" />,
-              text: "New View",
-              onClick: () => {
-                const e = new KeyboardEvent("keydown", {
-                  key: "v",
-                });
-                document.dispatchEvent(e);
-              },
-            }}
-          />
-        )
-      ) : (
-        <Loader className="space-y-3 p-8">
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
-          <Loader.Item height="30px" />
-        </Loader>
-      )}
+      <ProjectViewsList />
     </ProjectAuthorizationWrapper>
   );
 };
diff --git a/web/pages/[workspaceSlug]/projects/index.tsx b/web/pages/[workspaceSlug]/projects/index.tsx
index 5c671e32a..bfbb020e7 100644
--- a/web/pages/[workspaceSlug]/projects/index.tsx
+++ b/web/pages/[workspaceSlug]/projects/index.tsx
@@ -1,173 +1,20 @@
-import React, { useState } from "react";
-
 import { useRouter } from "next/router";
-
-import { mutate } from "swr";
-
-// services
-import projectService from "services/project.service";
-// hooks
-import useProjects from "hooks/use-projects";
-import useWorkspaces from "hooks/use-workspaces";
-import useUserAuth from "hooks/use-user-auth";
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-// components
-import { JoinProjectModal } from "components/project/join-project-modal";
-import { DeleteProjectModal, SingleProjectCard } from "components/project";
-// ui
-import { EmptyState, Icon, Loader, PrimaryButton } from "components/ui";
-import { Breadcrumbs, BreadcrumbItem } from "components/breadcrumbs";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-// images
-import emptyProject from "public/empty-state/project.svg";
-// types
 import type { NextPage } from "next";
-// fetch-keys
-import { PROJECT_MEMBERS } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
-// types
-import { IProject } from "types";
+// components
+import { ProjectCardList } from "components/project";
+import { ProjectsHeader } from "components/headers";
+// layouts
+import { AppLayout } from "layouts/app-layout";
 
 const ProjectsPage: NextPage = () => {
   // router
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const [query, setQuery] = useState("");
-
-  const { user } = useUserAuth();
-  // context data
-  const { activeWorkspace } = useWorkspaces();
-  const { projects, mutateProjects } = useProjects();
-  // states
-  const [deleteProject, setDeleteProject] = useState<string | null>(null);
-  const [selectedProjectToJoin, setSelectedProjectToJoin] = useState<string | null>(null);
-
-  const filteredProjectList =
-    query === ""
-      ? projects
-      : projects?.filter(
-          (project) =>
-            project.name.toLowerCase().includes(query.toLowerCase()) ||
-            project.identifier.toLowerCase().includes(query.toLowerCase())
-        );
-
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Projects`}
-            unshrinkTitle={false}
-          />
-        </Breadcrumbs>
-      }
-      right={
-        <div className="flex items-center gap-3">
-          <div className="flex w-full gap-1 items-center justify-start rounded-md px-2 py-1.5 border border-custom-border-300 bg-custom-background-90">
-            <Icon iconName="search" className="!text-xl !leading-5 !text-custom-sidebar-text-400" />
-            <input
-              className="w-full  border-none bg-transparent text-xs text-custom-text-200 focus:outline-none"
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="Search"
-            />
-          </div>
-
-          <PrimaryButton
-            className="flex items-center gap-2 flex-shrink-0"
-            onClick={() => {
-              const e = new KeyboardEvent("keydown", { key: "p" });
-              document.dispatchEvent(e);
-            }}
-          >
-            <PlusIcon className="h-4 w-4" />
-            Add Project
-          </PrimaryButton>
-        </div>
-      }
-    >
-      <JoinProjectModal
-        data={projects?.find((item) => item.id === selectedProjectToJoin)}
-        onClose={() => setSelectedProjectToJoin(null)}
-        onJoin={async () => {
-          const project = projects?.find((item) => item.id === selectedProjectToJoin);
-          if (!project) return;
-
-          await projectService
-            .joinProject(workspaceSlug as string, {
-              project_ids: [project.id],
-            })
-            .then(async () => {
-              mutate(PROJECT_MEMBERS(project.id));
-              mutateProjects<IProject[]>(
-                (prevData) =>
-                  (prevData ?? []).map((p) => ({
-                    ...p,
-                    is_member: p.id === project.id ? true : p.is_member,
-                  })),
-                false
-              );
-              setSelectedProjectToJoin(null);
-            })
-            .catch(() => {
-              setSelectedProjectToJoin(null);
-            });
-        }}
-      />
-      <DeleteProjectModal
-        isOpen={!!deleteProject}
-        onClose={() => setDeleteProject(null)}
-        data={projects?.find((item) => item.id === deleteProject) ?? null}
-        user={user}
-      />
-      {filteredProjectList ? (
-        <div className="h-full w-full overflow-hidden">
-          {filteredProjectList.length > 0 ? (
-            <div className="h-full p-8 overflow-y-auto">
-              <div className="grid grid-cols-1 gap-9 md:grid-cols-2 lg:grid-cols-3">
-                {filteredProjectList.map((project) => (
-                  <SingleProjectCard
-                    key={project.id}
-                    project={project}
-                    setToJoinProject={setSelectedProjectToJoin}
-                    setDeleteProject={setDeleteProject}
-                  />
-                ))}
-              </div>
-            </div>
-          ) : (
-            <EmptyState
-              image={emptyProject}
-              title="No projects yet"
-              description="Get started by creating your first project"
-              primaryButton={{
-                icon: <PlusIcon className="h-4 w-4" />,
-                text: "New Project",
-                onClick: () => {
-                  const e = new KeyboardEvent("keydown", {
-                    key: "p",
-                  });
-                  document.dispatchEvent(e);
-                },
-              }}
-            />
-          )}
-        </div>
-      ) : (
-        <Loader className="grid grid-cols-3 gap-4">
-          <Loader.Item height="100px" />
-          <Loader.Item height="100px" />
-          <Loader.Item height="100px" />
-          <Loader.Item height="100px" />
-          <Loader.Item height="100px" />
-          <Loader.Item height="100px" />
-        </Loader>
-      )}
-    </WorkspaceAuthorizationLayout>
+    <AppLayout header={<ProjectsHeader />}>
+      <>{workspaceSlug && <ProjectCardList workspaceSlug={workspaceSlug.toString()} />}</>
+    </AppLayout>
   );
 };
 
diff --git a/web/pages/[workspaceSlug]/settings/billing.tsx b/web/pages/[workspaceSlug]/settings/billing.tsx
index eeb95a5a3..5469b6b4f 100644
--- a/web/pages/[workspaceSlug]/settings/billing.tsx
+++ b/web/pages/[workspaceSlug]/settings/billing.tsx
@@ -5,13 +5,13 @@ 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";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // component
 import { SettingsSidebar } from "components/project";
 // ui
-import { SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import type { NextPage } from "next";
@@ -20,14 +20,16 @@ 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 },
   } = useRouter();
 
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
+    workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
   );
 
   return (
@@ -56,11 +58,9 @@ const BillingSettings: NextPage = () => {
           <div className="px-4 py-6">
             <div>
               <h4 className="text-md mb-1 leading-6">Current plan</h4>
-              <p className="mb-3 text-sm text-custom-text-200">
-                You are currently using the free plan
-              </p>
+              <p className="mb-3 text-sm text-custom-text-200">You are currently using the free plan</p>
               <a href="https://plane.so/pricing" target="_blank" rel="noreferrer">
-                <SecondaryButton outline>View Plans</SecondaryButton>
+                <Button variant="neutral-primary">View Plans</Button>
               </a>
             </div>
           </div>
diff --git a/web/pages/[workspaceSlug]/settings/exports.tsx b/web/pages/[workspaceSlug]/settings/exports.tsx
index f600f82f7..b0345d498 100644
--- a/web/pages/[workspaceSlug]/settings/exports.tsx
+++ b/web/pages/[workspaceSlug]/settings/exports.tsx
@@ -3,9 +3,9 @@ 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";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import ExportGuide from "components/exporter/guide";
 import { SettingsSidebar } from "components/project";
@@ -18,13 +18,15 @@ 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;
 
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
+    workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
   );
 
   return (
diff --git a/web/pages/[workspaceSlug]/settings/imports.tsx b/web/pages/[workspaceSlug]/settings/imports.tsx
index a8a5c8dc0..c0b500637 100644
--- a/web/pages/[workspaceSlug]/settings/imports.tsx
+++ b/web/pages/[workspaceSlug]/settings/imports.tsx
@@ -3,9 +3,9 @@ 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";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import IntegrationGuide from "components/integration/guide";
 import { SettingsSidebar } from "components/project";
@@ -18,13 +18,15 @@ 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;
 
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
+    workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
   );
 
   return (
diff --git a/web/pages/[workspaceSlug]/settings/index.tsx b/web/pages/[workspaceSlug]/settings/index.tsx
index 4a2986dfa..2acf2f960 100644
--- a/web/pages/[workspaceSlug]/settings/index.tsx
+++ b/web/pages/[workspaceSlug]/settings/index.tsx
@@ -7,20 +7,21 @@ 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";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import { ImageUploadModal } from "components/core";
 import { DeleteWorkspaceModal } from "components/workspace";
 import { SettingsSidebar } from "components/project";
 // ui
 import { Disclosure, Transition } from "@headlessui/react";
-import { Spinner, Input, CustomSelect, DangerButton, PrimaryButton, Icon } from "components/ui";
+import { CustomSelect, Icon } from "components/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { Pencil } from "lucide-react";
@@ -41,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);
@@ -59,9 +64,8 @@ const WorkspaceSettings: NextPage = () => {
 
   const { setToastAlert } = useToast();
 
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
+    workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
   );
 
   const {
@@ -156,9 +160,7 @@ const WorkspaceSettings: NextPage = () => {
     <WorkspaceAuthorizationLayout
       breadcrumbs={
         <Breadcrumbs>
-          <BreadcrumbItem
-            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Settings`}
-          />
+          <BreadcrumbItem title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Settings`} />
         </Breadcrumbs>
       }
     >
@@ -191,11 +193,7 @@ const WorkspaceSettings: NextPage = () => {
           <div className={`pr-9 py-8 w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
             <div className="flex gap-5 items-center pb-7 border-b border-custom-border-200">
               <div className="flex flex-col gap-1">
-                <button
-                  type="button"
-                  onClick={() => setIsImageUploadModalOpen(true)}
-                  disabled={!isAdmin}
-                >
+                <button type="button" onClick={() => setIsImageUploadModalOpen(true)} disabled={!isAdmin}>
                   {watch("logo") && watch("logo") !== null && watch("logo") !== "" ? (
                     <div className="relative mx-auto flex h-14 w-14">
                       <img
@@ -214,8 +212,7 @@ const WorkspaceSettings: NextPage = () => {
               <div className="flex flex-col gap-1">
                 <h3 className="text-lg font-semibold leading-6">{watch("name")}</h3>
                 <span className="text-sm tracking-tight">{`${
-                  typeof window !== "undefined" &&
-                  window.location.origin.replace("http://", "").replace("https://", "")
+                  typeof window !== "undefined" && window.location.origin.replace("http://", "").replace("https://", "")
                 }/${activeWorkspace.slug}`}</span>
                 <div className="flex item-center gap-2.5">
                   <button
@@ -240,21 +237,30 @@ const WorkspaceSettings: NextPage = () => {
               <div className="grid grid-col grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-10 w-full">
                 <div className="flex flex-col gap-1 ">
                   <h4 className="text-sm">Workspace Name</h4>
-                  <Input
-                    id="name"
+                  <Controller
+                    control={control}
                     name="name"
-                    placeholder="Name"
-                    autoComplete="off"
-                    register={register}
-                    error={errors.name}
-                    validations={{
+                    rules={{
                       required: "Name is required",
                       maxLength: {
                         value: 80,
                         message: "Workspace name should not exceed 80 characters",
                       },
                     }}
-                    disabled={!isAdmin}
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="name"
+                        name="name"
+                        type="text"
+                        value={value}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.name)}
+                        placeholder="Name"
+                        className="rounded-md font-medium w-full"
+                        disabled={!isAdmin}
+                      />
+                    )}
                   />
                 </div>
 
@@ -267,9 +273,7 @@ const WorkspaceSettings: NextPage = () => {
                       <CustomSelect
                         value={value}
                         onChange={onChange}
-                        label={
-                          ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"
-                        }
+                        label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"}
                         width="w-full"
                         input
                         disabled={!isAdmin}
@@ -286,30 +290,33 @@ const WorkspaceSettings: NextPage = () => {
 
                 <div className="flex flex-col gap-1 ">
                   <h4 className="text-sm">Workspace URL</h4>
-                  <Input
-                    id="url"
+                  <Controller
+                    control={control}
                     name="url"
-                    autoComplete="off"
-                    register={register}
-                    error={errors.url}
-                    className="w-full"
-                    value={`${
-                      typeof window !== "undefined" &&
-                      window.location.origin.replace("http://", "").replace("https://", "")
-                    }/${activeWorkspace.slug}`}
-                    disabled
+                    render={({ field: { value, onChange, ref } }) => (
+                      <Input
+                        id="url"
+                        name="url"
+                        type="url"
+                        value={`${
+                          typeof window !== "undefined" &&
+                          window.location.origin.replace("http://", "").replace("https://", "")
+                        }/${activeWorkspace.slug}`}
+                        onChange={onChange}
+                        ref={ref}
+                        hasError={Boolean(errors.url)}
+                        className="w-full"
+                        disabled
+                      />
+                    )}
                   />
                 </div>
               </div>
 
               <div className="flex items-center justify-between py-2">
-                <PrimaryButton
-                  onClick={handleSubmit(onSubmit)}
-                  loading={isSubmitting}
-                  disabled={!isAdmin}
-                >
+                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isAdmin}>
                   {isSubmitting ? "Updating..." : "Update Workspace"}
-                </PrimaryButton>
+                </Button>
               </div>
             </div>
             {isAdmin && (
@@ -337,19 +344,14 @@ const WorkspaceSettings: NextPage = () => {
                       <Disclosure.Panel>
                         <div className="flex flex-col gap-8">
                           <span className="text-sm tracking-tight">
-                            The danger zone of the workspace delete page is a critical area that
-                            requires careful consideration and attention. When deleting a workspace,
-                            all of the data and resources within that workspace will be permanently
-                            removed and cannot be recovered.
+                            The danger zone of the workspace delete page is a critical area that requires careful
+                            consideration and attention. When deleting a workspace, all of the data and resources within
+                            that workspace will be permanently removed and cannot be recovered.
                           </span>
                           <div>
-                            <DangerButton
-                              onClick={() => setIsOpen(true)}
-                              className="!text-sm"
-                              outline
-                            >
+                            <Button variant="danger" onClick={() => setIsOpen(true)}>
                               Delete my workspace
-                            </DangerButton>
+                            </Button>
                           </div>
                         </div>
                       </Disclosure.Panel>
diff --git a/web/pages/[workspaceSlug]/settings/integrations.tsx b/web/pages/[workspaceSlug]/settings/integrations.tsx
index 822860d03..7d6869ed2 100644
--- a/web/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/web/pages/[workspaceSlug]/settings/integrations.tsx
@@ -5,16 +5,17 @@ import { useRouter } from "next/router";
 import useSWR from "swr";
 
 // services
-import workspaceService from "services/workspace.service";
-import IntegrationService from "services/integration";
+import { WorkspaceService } from "services/workspace.service";
+import { IntegrationService } from "services/integrations";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import { SingleIntegrationCard } from "components/integration";
 import { SettingsSidebar } from "components/project";
 // ui
-import { IntegrationAndImportExportBanner, Loader } from "components/ui";
+import { IntegrationAndImportExportBanner } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
+import { Loader } from "@plane/ui";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -22,17 +23,20 @@ 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;
 
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null, () =>
+    workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null
   );
 
   const { data: appIntegrations } = useSWR(workspaceSlug ? APP_INTEGRATIONS : null, () =>
-    workspaceSlug ? IntegrationService.getAppIntegrationsList() : null
+    workspaceSlug ? integrationService.getAppIntegrationsList() : null
   );
 
   return (
diff --git a/web/pages/[workspaceSlug]/settings/members.tsx b/web/pages/[workspaceSlug]/settings/members.tsx
index 3a698342b..3408540dc 100644
--- a/web/pages/[workspaceSlug]/settings/members.tsx
+++ b/web/pages/[workspaceSlug]/settings/members.tsx
@@ -6,35 +6,35 @@ 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";
 import useWorkspaceMembers from "hooks/use-workspace-members";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
 import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove";
 import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
 import { SettingsSidebar } from "components/project";
 // ui
-import { CustomMenu, CustomSelect, Icon, Loader, PrimaryButton } from "components/ui";
+import { Button, Loader } from "@plane/ui";
+import { CustomMenu, CustomSelect, Icon } from "components/ui";
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { XMarkIcon } from "components/icons";
 // types
 import type { NextPage } from "next";
 // fetch-keys
-import {
-  WORKSPACE_DETAILS,
-  WORKSPACE_INVITATION_WITH_EMAIL,
-  WORKSPACE_MEMBERS_WITH_EMAIL,
-} from "constants/fetch-keys";
+import { WORKSPACE_DETAILS, WORKSPACE_INVITATION_WITH_EMAIL, WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys";
 // constants
 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);
@@ -49,23 +49,18 @@ const MembersSettings: NextPage = () => {
 
   const { isOwner } = useWorkspaceMembers(workspaceSlug?.toString(), Boolean(workspaceSlug));
 
-  const { data: activeWorkspace } = useSWR(
-    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug.toString()) : null,
-    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug.toString()) : null)
+  const { data: activeWorkspace } = useSWR(workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug.toString()) : null, () =>
+    workspaceSlug ? workspaceService.getWorkspace(workspaceSlug.toString()) : null
   );
 
   const { data: workspaceMembers, mutate: mutateMembers } = useSWR(
     workspaceSlug ? WORKSPACE_MEMBERS_WITH_EMAIL(workspaceSlug.toString()) : null,
-    workspaceSlug
-      ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug.toString())
-      : null
+    workspaceSlug ? () => workspaceService.workspaceMembersWithEmail(workspaceSlug.toString()) : null
   );
 
   const { data: workspaceInvitations, mutate: mutateInvitations } = useSWR(
     workspaceSlug ? WORKSPACE_INVITATION_WITH_EMAIL(workspaceSlug.toString()) : null,
-    workspaceSlug
-      ? () => workspaceService.workspaceInvitationsWithEmail(workspaceSlug.toString())
-      : null
+    workspaceSlug ? () => workspaceService.workspaceInvitationsWithEmail(workspaceSlug.toString()) : null
   );
 
   const members = [
@@ -143,15 +138,12 @@ const MembersSettings: NextPage = () => {
                 });
               })
               .finally(() => {
-                mutateMembers((prevData: any) =>
-                  prevData?.filter((item: any) => item.id !== selectedRemoveMember)
-                );
+                mutateMembers((prevData: any) => prevData?.filter((item: any) => item.id !== selectedRemoveMember));
               });
           }
           if (selectedInviteRemoveMember) {
             mutateInvitations(
-              (prevData: any) =>
-                prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
+              (prevData: any) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
               false
             );
             workspaceService
@@ -193,7 +185,9 @@ const MembersSettings: NextPage = () => {
         <section className="pr-9 py-8 w-full overflow-y-auto">
           <div className="flex items-center justify-between gap-4 pt-2 pb-3.5 border-b border-custom-border-200">
             <h4 className="text-xl font-medium">Members</h4>
-            <PrimaryButton onClick={() => setInviteModal(true)}>Add Member</PrimaryButton>
+            <Button variant="primary" onClick={() => setInviteModal(true)}>
+              Add Member
+            </Button>
           </div>
           {!workspaceMembers || !workspaceInvitations ? (
             <Loader className="space-y-5">
@@ -206,10 +200,7 @@ const MembersSettings: NextPage = () => {
             <div className="divide-y divide-custom-border-200">
               {members.length > 0
                 ? members.map((member) => (
-                    <div
-                      key={member.id}
-                      className="group flex items-center justify-between px-3.5 py-[18px]"
-                    >
+                    <div key={member.id} className="group flex items-center justify-between px-3.5 py-[18px]">
                       <div className="flex items-center gap-x-8 gap-y-2">
                         {member.avatar && member.avatar !== "" ? (
                           <Link href={`/${workspaceSlug}/profile/${member.memberId}`}>
@@ -239,21 +230,13 @@ const MembersSettings: NextPage = () => {
                                 <span>
                                   {member.first_name} {member.last_name}
                                 </span>
-                                <span className="text-custom-text-300 text-sm ml-2">
-                                  ({member.display_name})
-                                </span>
+                                <span className="text-custom-text-300 text-sm ml-2">({member.display_name})</span>
                               </a>
                             </Link>
                           ) : (
-                            <h4 className="text-sm cursor-default">
-                              {member.display_name || member.email}
-                            </h4>
-                          )}
-                          {isOwner && (
-                            <p className="mt-0.5 text-xs text-custom-sidebar-text-300">
-                              {member.email}
-                            </p>
+                            <h4 className="text-sm cursor-default">{member.display_name || member.email}</h4>
                           )}
+                          {isOwner && <p className="mt-0.5 text-xs text-custom-sidebar-text-300">{member.email}</p>}
                         </div>
                       </div>
                       <div className="flex items-center gap-3 text-xs">
@@ -288,9 +271,7 @@ const MembersSettings: NextPage = () => {
 
                             mutateMembers(
                               (prevData: any) =>
-                                prevData?.map((m: any) =>
-                                  m.id === member.id ? { ...m, role: value } : m
-                                ),
+                                prevData?.map((m: any) => (m.id === member.id ? { ...m, role: value } : m)),
                               false
                             );
 
@@ -302,26 +283,18 @@ const MembersSettings: NextPage = () => {
                                 setToastAlert({
                                   type: "error",
                                   title: "Error!",
-                                  message:
-                                    "An error occurred while updating member role. Please try again.",
+                                  message: "An error occurred while updating member role. Please try again.",
                                 });
                               });
                           }}
                           disabled={
                             member.memberId === currentUser?.member.id ||
                             !member.status ||
-                            (currentUser &&
-                              currentUser.role !== 20 &&
-                              currentUser.role < member.role)
+                            (currentUser && currentUser.role !== 20 && currentUser.role < member.role)
                           }
                         >
                           {Object.keys(ROLE).map((key) => {
-                            if (
-                              currentUser &&
-                              currentUser.role !== 20 &&
-                              currentUser.role < parseInt(key)
-                            )
-                              return null;
+                            if (currentUser && currentUser.role !== 20 && currentUser.role < parseInt(key)) return null;
 
                             return (
                               <CustomSelect.Option key={key} value={key}>
@@ -343,10 +316,7 @@ const MembersSettings: NextPage = () => {
                             <span className="flex items-center justify-start gap-2">
                               <XMarkIcon className="h-4 w-4" />
 
-                              <span>
-                                {" "}
-                                {user?.id === member.memberId ? "Leave" : "Remove member"}
-                              </span>
+                              <span> {user?.id === member.memberId ? "Leave" : "Remove member"}</span>
                             </span>
                           </CustomMenu.MenuItem>
                         </CustomMenu>
diff --git a/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
new file mode 100644
index 000000000..484758cd2
--- /dev/null
+++ b/web/pages/[workspaceSlug]/workspace-views/[globalViewId].tsx
@@ -0,0 +1,40 @@
+import { useRouter } from "next/router";
+import useSWR from "swr";
+
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalViewLayoutRoot } from "components/issues";
+import { GlobalIssuesHeader } from "components/headers";
+// types
+import { NextPage } from "next";
+
+const GlobalViewIssues: NextPage = () => {
+  const router = useRouter();
+  const { workspaceSlug, globalViewId } = router.query;
+
+  const { globalViews: globalViewsStore } = useMobxStore();
+
+  useSWR(
+    workspaceSlug && globalViewId ? `GLOBAL_VIEW_DETAILS_${globalViewId.toString()}` : null,
+    workspaceSlug && globalViewId
+      ? () => globalViewsStore.fetchGlobalViewDetails(workspaceSlug.toString(), globalViewId.toString())
+      : null
+  );
+
+  return (
+    <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>
+      <div className="h-full overflow-hidden bg-custom-background-100">
+        <div className="h-full w-full flex flex-col border-b border-custom-border-300">
+          <GlobalViewsHeader />
+          <GlobalViewLayoutRoot />
+        </div>
+      </div>
+    </AppLayout>
+  );
+};
+
+export default GlobalViewIssues;
diff --git a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
index e41b50a4a..f4a39f8f5 100644
--- a/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/all-issues.tsx
@@ -1,40 +1,21 @@
+// components
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewLayoutRoot } from "components/issues";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
-import { PrimaryButton } from "components/ui";
-// component
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { WorkspaceAllIssue } from "components/issues/workspace-views/workspace-all-issue";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CheckCircle } from "lucide-react";
+import { AppLayout } from "layouts/app-layout";
+// types
+import { NextPage } from "next";
 
-const WorkspaceViewAllIssue = () => (
-  <WorkspaceAuthorizationLayout
-    breadcrumbs={
-      <div className="flex gap-2 items-center">
-        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
-        <span className="text-sm font-medium">Workspace issues</span>
+const GlobalViewAllIssues: NextPage = () => (
+  <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>
+    <div className="h-full overflow-hidden bg-custom-background-100">
+      <div className="h-full w-full flex flex-col border-b border-custom-border-300">
+        <GlobalViewsHeader />
+        <GlobalViewLayoutRoot type="all-issues" />
       </div>
-    }
-    right={
-      <div className="flex items-center gap-2">
-        <WorkspaceIssuesViewOptions />
-
-        <PrimaryButton
-          className="flex items-center gap-2"
-          onClick={() => {
-            const e = new KeyboardEvent("keydown", { key: "c" });
-            document.dispatchEvent(e);
-          }}
-        >
-          <PlusIcon className="h-4 w-4" />
-          Add Issue
-        </PrimaryButton>
-      </div>
-    }
-  >
-    <WorkspaceAllIssue />
-  </WorkspaceAuthorizationLayout>
+    </div>
+  </AppLayout>
 );
 
-export default WorkspaceViewAllIssue;
+export default GlobalViewAllIssues;
diff --git a/web/pages/[workspaceSlug]/workspace-views/assigned.tsx b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
index 0edef4d81..8ecd59367 100644
--- a/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/assigned.tsx
@@ -1,40 +1,21 @@
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { WorkspaceAssignedIssue } from "components/issues/workspace-views/workspace-assigned-issue";
-// ui
-import { PrimaryButton } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CheckCircle } from "lucide-react";
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewLayoutRoot } from "components/issues";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// types
+import { NextPage } from "next";
 
-const WorkspaceViewAssignedIssue: React.FC = () => (
-  <WorkspaceAuthorizationLayout
-    breadcrumbs={
-      <div className="flex gap-2 items-center">
-        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
-        <span className="text-sm font-medium">Workspace Issues</span>
+const GlobalViewAssignedIssues: NextPage = () => (
+  <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>
+    <div className="h-full overflow-hidden bg-custom-background-100">
+      <div className="h-full w-full flex flex-col border-b border-custom-border-300">
+        <GlobalViewsHeader />
+        <GlobalViewLayoutRoot type="assigned" />
       </div>
-    }
-    right={
-      <div className="flex items-center gap-2">
-        <WorkspaceIssuesViewOptions />
-        <PrimaryButton
-          className="flex items-center gap-2"
-          onClick={() => {
-            const e = new KeyboardEvent("keydown", { key: "c" });
-            document.dispatchEvent(e);
-          }}
-        >
-          <PlusIcon className="h-4 w-4" />
-          Add Issue
-        </PrimaryButton>
-      </div>
-    }
-  >
-    <WorkspaceAssignedIssue />
-  </WorkspaceAuthorizationLayout>
+    </div>
+  </AppLayout>
 );
 
-export default WorkspaceViewAssignedIssue;
+export default GlobalViewAssignedIssues;
diff --git a/web/pages/[workspaceSlug]/workspace-views/created.tsx b/web/pages/[workspaceSlug]/workspace-views/created.tsx
index 07ddbbae9..18658a5c1 100644
--- a/web/pages/[workspaceSlug]/workspace-views/created.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/created.tsx
@@ -1,40 +1,21 @@
-// layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 // components
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { WorkspaceCreatedIssues } from "components/issues/workspace-views/workspace-created-issues";
-// ui
-import { PrimaryButton } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CheckCircle } from "lucide-react";
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewLayoutRoot } from "components/issues";
+// layouts
+import { AppLayout } from "layouts/app-layout";
+// types
+import { NextPage } from "next";
 
-const WorkspaceViewCreatedIssue: React.FC = () => (
-  <WorkspaceAuthorizationLayout
-    breadcrumbs={
-      <div className="flex gap-2 items-center">
-        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
-        <span className="text-sm font-medium">Workspace Issues</span>
+const GlobalViewCreatedIssues: NextPage = () => (
+  <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>
+    <div className="h-full overflow-hidden bg-custom-background-100">
+      <div className="h-full w-full flex flex-col border-b border-custom-border-300">
+        <GlobalViewsHeader />
+        <GlobalViewLayoutRoot type="created" />
       </div>
-    }
-    right={
-      <div className="flex items-center gap-2">
-        <WorkspaceIssuesViewOptions />
-        <PrimaryButton
-          className="flex items-center gap-2"
-          onClick={() => {
-            const e = new KeyboardEvent("keydown", { key: "c" });
-            document.dispatchEvent(e);
-          }}
-        >
-          <PlusIcon className="h-4 w-4" />
-          Add Issue
-        </PrimaryButton>
-      </div>
-    }
-  >
-    <WorkspaceCreatedIssues />
-  </WorkspaceAuthorizationLayout>
+    </div>
+  </AppLayout>
 );
 
-export default WorkspaceViewCreatedIssue;
+export default GlobalViewCreatedIssues;
diff --git a/web/pages/[workspaceSlug]/workspace-views/index.tsx b/web/pages/[workspaceSlug]/workspace-views/index.tsx
index 5e1ef61a8..5c136c6d0 100644
--- a/web/pages/[workspaceSlug]/workspace-views/index.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/index.tsx
@@ -1,205 +1,42 @@
 import React, { useState } from "react";
-
-import Link from "next/link";
-
-import { useRouter } from "next/router";
-
-import useSWR from "swr";
-
-// services
-import workspaceService from "services/workspace.service";
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
 // components
-import { SingleWorkspaceViewItem } from "components/workspace/views/single-workspace-view-item";
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { CreateUpdateWorkspaceViewModal } from "components/workspace/views/modal";
-import { DeleteWorkspaceViewModal } from "components/workspace/views/delete-workspace-view-modal";
+import { GlobalDefaultViewListItem, GlobalViewsList } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
 // ui
-import { EmptyState, Input, Loader, PrimaryButton } from "components/ui";
+import { Input } from "@plane/ui";
 // icons
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { PlusIcon } from "lucide-react";
-import { PhotoFilterOutlined } from "@mui/icons-material";
-// image
-import emptyView from "public/empty-state/view.svg";
+import { Search } from "lucide-react";
 // types
 import type { NextPage } from "next";
-import { IWorkspaceView } from "types/workspace-views";
 // constants
-import { WORKSPACE_VIEWS_LIST } from "constants/fetch-keys";
-// helper
-import { truncateText } from "helpers/string.helper";
+import { DEFAULT_GLOBAL_VIEWS_LIST } from "constants/workspace";
 
 const WorkspaceViews: NextPage = () => {
   const [query, setQuery] = useState("");
 
-  const [createUpdateViewModal, setCreateUpdateViewModal] = useState(false);
-  const [selectedViewToUpdate, setSelectedViewToUpdate] = useState<IWorkspaceView | null>(null);
-
-  const [deleteViewModal, setDeleteViewModal] = useState(false);
-  const [selectedViewToDelete, setSelectedViewToDelete] = useState<IWorkspaceView | null>(null);
-
-  const router = useRouter();
-  const { workspaceSlug } = router.query;
-
-  const { data: workspaceViews } = useSWR(
-    workspaceSlug ? WORKSPACE_VIEWS_LIST(workspaceSlug as string) : null,
-    workspaceSlug ? () => workspaceService.getAllViews(workspaceSlug as string) : null
-  );
-
-  const defaultWorkspaceViewsList = [
-    {
-      key: "all",
-      label: "All Issues",
-      href: `/${workspaceSlug}/workspace-views/all-issues`,
-    },
-    {
-      key: "assigned",
-      label: "Assigned",
-      href: `/${workspaceSlug}/workspace-views/assigned`,
-    },
-    {
-      key: "created",
-      label: "Created",
-      href: `/${workspaceSlug}/workspace-views/created`,
-    },
-    {
-      key: "subscribed",
-      label: "Subscribed",
-      href: `/${workspaceSlug}/workspace-views/subscribed`,
-    },
-  ];
-
-  const filteredDefaultOptions =
-    query === ""
-      ? defaultWorkspaceViewsList
-      : defaultWorkspaceViewsList?.filter((option) =>
-          option.label.toLowerCase().includes(query.toLowerCase())
-        );
-
-  const filteredOptions =
-    query === ""
-      ? workspaceViews
-      : workspaceViews?.filter((option) => option.name.toLowerCase().includes(query.toLowerCase()));
-
-  const handleEditView = (view: IWorkspaceView) => {
-    setSelectedViewToUpdate(view);
-    setCreateUpdateViewModal(true);
-  };
-
-  const handleDeleteView = (view: IWorkspaceView) => {
-    setSelectedViewToDelete(view);
-    setDeleteViewModal(true);
-  };
-
   return (
-    <WorkspaceAuthorizationLayout
-      breadcrumbs={
-        <div className="flex gap-2 items-center">
-          <span className="text-sm font-medium">Workspace Views</span>
-        </div>
-      }
-      right={
-        <div className="flex items-center gap-2">
-          <WorkspaceIssuesViewOptions />
-
-          <PrimaryButton
-            className="flex items-center gap-2"
-            onClick={() => setCreateUpdateViewModal(true)}
-          >
-            <PlusIcon className="h-4 w-4" />
-            New View
-          </PrimaryButton>
-        </div>
-      }
-    >
-      <CreateUpdateWorkspaceViewModal
-        isOpen={createUpdateViewModal}
-        handleClose={() => {
-          setCreateUpdateViewModal(false);
-          setSelectedViewToUpdate(null);
-        }}
-        data={selectedViewToUpdate}
-      />
-      <DeleteWorkspaceViewModal
-        isOpen={deleteViewModal}
-        data={selectedViewToDelete}
-        setIsOpen={setDeleteViewModal}
-      />
+    <AppLayout header={<GlobalIssuesHeader activeLayout="list" />}>
       <div className="flex flex-col">
         <div className="h-full w-full flex flex-col overflow-hidden">
           <div className="flex items-center gap-2.5 w-full px-5 py-3 border-b border-custom-border-200">
-            <MagnifyingGlassIcon className="h-4 w-4 text-custom-text-200" />
+            <Search className="text-custom-text-200" size={14} strokeWidth={2} />
             <Input
               className="w-full bg-transparent text-xs leading-5 text-custom-text-200 placeholder:text-custom-text-400 !p-0 focus:outline-none"
               value={query}
               onChange={(e) => setQuery(e.target.value)}
               placeholder="Search"
-              mode="trueTransparent"
+              mode="true-transparent"
             />
           </div>
         </div>
-        {filteredDefaultOptions &&
-          filteredDefaultOptions.length > 0 &&
-          filteredDefaultOptions.map((option) => (
-            <div className="group hover:bg-custom-background-90 border-b border-custom-border-200">
-              <Link href={option.href}>
-                <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(option.label, 75)}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                </a>
-              </Link>
-            </div>
-          ))}
-
-        {filteredOptions ? (
-          filteredOptions.length > 0 ? (
-            <div>
-              {filteredOptions.map((view) => (
-                <SingleWorkspaceViewItem
-                  key={view.id}
-                  view={view}
-                  handleEditView={() => handleEditView(view)}
-                  handleDeleteView={() => handleDeleteView(view)}
-                />
-              ))}
-            </div>
-          ) : (
-            <EmptyState
-              title="Get focused with views"
-              description="Views aid in saving your issues by applying various filters and grouping options."
-              image={emptyView}
-              primaryButton={{
-                icon: <PlusIcon className="h-4 w-4" />,
-                text: "New View",
-                onClick: () => setCreateUpdateViewModal(true),
-              }}
-            />
-          )
-        ) : (
-          <Loader className="space-y-1.5">
-            <Loader.Item height="72px" />
-            <Loader.Item height="72px" />
-            <Loader.Item height="72px" />
-            <Loader.Item height="72px" />
-            <Loader.Item height="72px" />
-          </Loader>
-        )}
+        {DEFAULT_GLOBAL_VIEWS_LIST.filter((v) => v.label.toLowerCase().includes(query.toLowerCase())).map((option) => (
+          <GlobalDefaultViewListItem key={option.key} view={option} />
+        ))}
+        <GlobalViewsList searchQuery={query} />
       </div>
-    </WorkspaceAuthorizationLayout>
+    </AppLayout>
   );
 };
 
diff --git a/web/pages/[workspaceSlug]/workspace-views/issues.tsx b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
index 1f94604c7..abda7d8e8 100644
--- a/web/pages/[workspaceSlug]/workspace-views/issues.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
@@ -1,8 +1,8 @@
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { WorkspaceAuthorizationLayout } from "layouts/auth-layout-legacy";
 // components
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { WorkspaceViewIssues } from "components/issues/workspace-views/workpace-view-issues";
+// import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
+// import { WorkspaceViewIssues } from "components/issues/workspace-views/workpace-view-issues";
 // ui
 import { PrimaryButton } from "components/ui";
 // icons
@@ -19,7 +19,7 @@ const WorkspaceView = () => (
     }
     right={
       <div className="flex items-center gap-2">
-        <WorkspaceIssuesViewOptions />
+        {/* <WorkspaceIssuesViewOptions /> */}
         <PrimaryButton
           className="flex items-center gap-2"
           onClick={() => {
@@ -33,7 +33,7 @@ const WorkspaceView = () => (
       </div>
     }
   >
-    <WorkspaceViewIssues />
+    {/* <WorkspaceViewIssues /> */}
   </WorkspaceAuthorizationLayout>
 );
 
diff --git a/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
index 50da24a82..f7afe9e3a 100644
--- a/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/subscribed.tsx
@@ -1,40 +1,21 @@
 // layouts
-import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
+import { AppLayout } from "layouts/app-layout";
 // components
-import { WorkspaceIssuesViewOptions } from "components/issues/workspace-views/workspace-issue-view-option";
-import { WorkspaceSubscribedIssues } from "components/issues/workspace-views/workspace-subscribed-issue";
-// ui
-import { PrimaryButton } from "components/ui";
-// icons
-import { PlusIcon } from "@heroicons/react/24/outline";
-import { CheckCircle } from "lucide-react";
+import { GlobalViewsHeader } from "components/workspace";
+import { GlobalIssuesHeader } from "components/headers";
+import { GlobalViewLayoutRoot } from "components/issues";
+// types
+import { NextPage } from "next";
 
-const WorkspaceViewSubscribedIssue: React.FC = () => (
-  <WorkspaceAuthorizationLayout
-    breadcrumbs={
-      <div className="flex gap-2 items-center">
-        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
-        <span className="text-sm font-medium">Workspace Issue</span>
+const GlobalViewSubscribedIssues: NextPage = () => (
+  <AppLayout header={<GlobalIssuesHeader activeLayout="spreadsheet" />}>
+    <div className="h-full overflow-hidden bg-custom-background-100">
+      <div className="h-full w-full flex flex-col border-b border-custom-border-300">
+        <GlobalViewsHeader />
+        <GlobalViewLayoutRoot type="subscribed" />
       </div>
-    }
-    right={
-      <div className="flex items-center gap-2">
-        <WorkspaceIssuesViewOptions />
-        <PrimaryButton
-          className="flex items-center gap-2"
-          onClick={() => {
-            const e = new KeyboardEvent("keydown", { key: "c" });
-            document.dispatchEvent(e);
-          }}
-        >
-          <PlusIcon className="h-4 w-4" />
-          Add Issue
-        </PrimaryButton>
-      </div>
-    }
-  >
-    <WorkspaceSubscribedIssues />
-  </WorkspaceAuthorizationLayout>
+    </div>
+  </AppLayout>
 );
 
-export default WorkspaceViewSubscribedIssue;
+export default GlobalViewSubscribedIssues;
diff --git a/web/pages/_error.tsx b/web/pages/_error.tsx
index 3595c6ce7..e131c4e01 100644
--- a/web/pages/_error.tsx
+++ b/web/pages/_error.tsx
@@ -3,13 +3,16 @@ import * as Sentry from "@sentry/nextjs";
 import { useRouter } from "next/router";
 
 // services
-import authenticationService from "services/authentication.service";
+import { AuthService } from "services/auth.service";
 // hooks
 import useToast from "hooks/use-toast";
 // layouts
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { PrimaryButton, SecondaryButton } from "components/ui";
+import { Button } from "@plane/ui";
+
+// services
+const authService = new AuthService();
 
 const CustomErrorComponent = () => {
   const router = useRouter();
@@ -17,7 +20,7 @@ const CustomErrorComponent = () => {
   const { setToastAlert } = useToast();
 
   const handleSignOut = async () => {
-    await authenticationService
+    await authService
       .signOut()
       .catch(() =>
         setToastAlert({
@@ -36,9 +39,8 @@ const CustomErrorComponent = () => {
           <div className="space-y-2">
             <h3 className="text-lg font-semibold">Exception Detected!</h3>
             <p className="text-sm text-custom-text-200 w-1/2 mx-auto">
-              We{"'"}re Sorry! An exception has been detected, and our engineering team has been
-              notified. We apologize for any inconvenience this may have caused. Please reach out to
-              our engineering team at{" "}
+              We{"'"}re Sorry! An exception has been detected, and our engineering team has been notified. We apologize
+              for any inconvenience this may have caused. Please reach out to our engineering team at{" "}
               <a href="mailto:support@plane.so" className="text-custom-primary">
                 support@plane.so
               </a>{" "}
@@ -55,12 +57,12 @@ const CustomErrorComponent = () => {
             </p>
           </div>
           <div className="flex items-center gap-2 justify-center">
-            <PrimaryButton size="md" onClick={() => router.back()}>
+            <Button variant="primary" size="md" onClick={() => router.back()}>
               Go back
-            </PrimaryButton>
-            <SecondaryButton size="md" onClick={handleSignOut}>
+            </Button>
+            <Button variant="neutral-primary" size="md" onClick={handleSignOut}>
               Sign out
-            </SecondaryButton>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/web/pages/accounts/forgot-password.tsx b/web/pages/accounts/forgot-password.tsx
new file mode 100644
index 000000000..6b313a796
--- /dev/null
+++ b/web/pages/accounts/forgot-password.tsx
@@ -0,0 +1,71 @@
+import { NextPage } from "next";
+import Image from "next/image";
+// components
+import { EmailForgotPasswordForm, EmailForgotPasswordFormValues } from "components/account";
+// layouts
+import DefaultLayout from "layouts/default-layout";
+// services
+import { UserService } from "services/user.service";
+// hooks
+import useToast from "hooks/use-toast";
+// images
+import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
+
+const userService = new UserService();
+
+const ForgotPasswordPage: NextPage = () => {
+  // toast
+  const { setToastAlert } = useToast();
+
+  const handleForgotPassword = (formData: EmailForgotPasswordFormValues) => {
+    const payload = {
+      email: formData.email,
+    };
+
+    return userService
+      .forgotPassword(payload)
+      .then(() =>
+        setToastAlert({
+          type: "success",
+          title: "Success!",
+          message: "Password reset link has been sent to your email address.",
+        })
+      )
+      .catch((err) => {
+        if (err.status === 400)
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Please check the Email ID entered.",
+          });
+        else
+          setToastAlert({
+            type: "error",
+            title: "Error!",
+            message: "Something went wrong. Please try again.",
+          });
+      });
+  };
+  return (
+    <DefaultLayout>
+      <>
+        <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
+        <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
+          <div className="grid place-items-center bg-custom-background-100">
+            <div className="h-[30px] w-[30px]">
+              <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
+            </div>
+          </div>
+        </div>
+      </>
+      <div className="grid place-items-center h-full overflow-y-auto py-6 px-7">
+        <div>
+          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">Forgot Password</h1>
+          <EmailForgotPasswordForm onSubmit={handleForgotPassword} />
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+};
+
+export default ForgotPasswordPage;
diff --git a/web/pages/magic-sign-in.tsx b/web/pages/accounts/magic-sign-in.tsx
similarity index 93%
rename from web/pages/magic-sign-in.tsx
rename to web/pages/accounts/magic-sign-in.tsx
index 7de298d39..e7322eb8c 100644
--- a/web/pages/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/authentication.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({
@@ -95,9 +97,7 @@ const MagicSignIn: NextPage = () => {
         ) : (
           <div className="flex h-full w-full flex-col items-center justify-center gap-y-2">
             <h2 className="text-4xl font-medium">Success</h2>
-            <p className="text-sm font-medium text-custom-text-200">
-              Redirecting you to the app...
-            </p>
+            <p className="text-sm font-medium text-custom-text-200">Redirecting you to the app...</p>
           </div>
         )}
       </div>
diff --git a/web/pages/reset-password.tsx b/web/pages/accounts/reset-password.tsx
similarity index 63%
rename from web/pages/reset-password.tsx
rename to web/pages/accounts/reset-password.tsx
index fa17d2333..18310931c 100644
--- a/web/pages/reset-password.tsx
+++ b/web/pages/accounts/reset-password.tsx
@@ -6,15 +6,15 @@ import Image from "next/image";
 // next-themes
 import { useTheme } from "next-themes";
 // react-hook-form
-import { useForm } from "react-hook-form";
+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
-import { Input, PrimaryButton, Spinner } from "components/ui";
+import { Button, Input, Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 // types
@@ -25,6 +25,9 @@ type FormData = {
   confirmPassword: string;
 };
 
+// services
+const userService = new UserService();
+
 const ResetPasswordPage: NextPage = () => {
   const [isLoading, setIsLoading] = useState(true);
 
@@ -36,8 +39,8 @@ const ResetPasswordPage: NextPage = () => {
   const { setTheme } = useTheme();
 
   const {
-    register,
     handleSubmit,
+    control,
     formState: { errors, isSubmitting },
   } = useForm<FormData>();
 
@@ -73,9 +76,7 @@ const ResetPasswordPage: NextPage = () => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message:
-            err?.error ||
-            "Something went wrong. Please try again later or contact the support team.",
+          message: err?.error || "Something went wrong. Please try again later or contact the support team.",
         })
       );
   };
@@ -110,49 +111,56 @@ const ResetPasswordPage: NextPage = () => {
       </>
       <div className="grid place-items-center h-full w-full overflow-y-auto py-5 px-7">
         <div className="w-full">
-          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-            Reset your password
-          </h1>
+          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">Reset your password</h1>
 
-          <form
-            className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto"
-            onSubmit={handleSubmit(onSubmit)}
-          >
+          <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)}>
             <div className="space-y-1">
-              <Input
-                id="password"
-                type="password"
+              <Controller
+                control={control}
                 name="password"
-                register={register}
-                validations={{
+                rules={{
                   required: "Password is required",
                 }}
-                error={errors.password}
-                placeholder="Enter new password..."
-                className="border-custom-border-300 h-[46px]"
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="password"
+                    name="password"
+                    type="password"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.password)}
+                    placeholder="Enter new password..."
+                    className="border-custom-border-300 h-[46px] w-full"
+                  />
+                )}
               />
             </div>
             <div className="space-y-1">
-              <Input
-                id="confirmPassword"
-                type="password"
+              <Controller
+                control={control}
                 name="confirmPassword"
-                register={register}
-                validations={{
-                  required: "Password confirmation is required",
+                rules={{
+                  required: "Password is required",
                 }}
-                error={errors.confirmPassword}
-                placeholder="Confirm new password..."
-                className="border-custom-border-300 h-[46px]"
+                render={({ field: { value, onChange, ref } }) => (
+                  <Input
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type="password"
+                    value={value}
+                    onChange={onChange}
+                    ref={ref}
+                    hasError={Boolean(errors.confirmPassword)}
+                    placeholder="Confirm new password..."
+                    className="border-custom-border-300 h-[46px] w-full"
+                  />
+                )}
               />
             </div>
-            <PrimaryButton
-              type="submit"
-              className="w-full text-center h-[46px]"
-              loading={isSubmitting}
-            >
+            <Button variant="primary" type="submit" className="w-full" loading={isSubmitting}>
               {isSubmitting ? "Resetting..." : "Reset"}
-            </PrimaryButton>
+            </Button>
           </form>
         </div>
       </div>
diff --git a/web/pages/sign-up.tsx b/web/pages/accounts/sign-up.tsx
similarity index 88%
rename from web/pages/sign-up.tsx
rename to web/pages/accounts/sign-up.tsx
index d2d33032d..0a9aee797 100644
--- a/web/pages/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/authentication.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({
@@ -53,9 +56,7 @@ const SignUp: NextPage = () => {
         setToastAlert({
           type: "error",
           title: "Error!",
-          message:
-            err?.error ||
-            "Something went wrong. Please try again later or contact the support team.",
+          message: err?.error || "Something went wrong. Please try again later or contact the support team.",
         })
       );
   };
diff --git a/web/pages/create-workspace.tsx b/web/pages/create-workspace/index.tsx
similarity index 82%
rename from web/pages/create-workspace.tsx
rename to web/pages/create-workspace/index.tsx
index b6aa41728..c6db0bd76 100644
--- a/web/pages/create-workspace.tsx
+++ b/web/pages/create-workspace/index.tsx
@@ -1,30 +1,29 @@
 import React, { useState } from "react";
-
 import { useRouter } from "next/router";
 import Image from "next/image";
-
 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
 import DefaultLayout from "layouts/default-layout";
-import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
+import { UserAuthorizationLayout } from "layouts/auth-layout-legacy/user-authorization-wrapper";
 // components
 import { CreateWorkspaceForm } from "components/workspace";
 // images
 import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
 import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
 // types
-import { ICurrentUserResponse, IWorkspace } from "types";
+import { IUser, IWorkspace } from "types";
 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: "",
@@ -39,7 +38,7 @@ const CreateWorkspace: NextPage = () => {
   const { user } = useUser();
 
   const onSubmit = async (workspace: IWorkspace) => {
-    mutate<ICurrentUserResponse>(
+    mutate<IUser>(
       CURRENT_USER,
       (prevData) => {
         if (!prevData) return prevData;
@@ -47,21 +46,19 @@ const CreateWorkspace: NextPage = () => {
         return {
           ...prevData,
           last_workspace_id: workspace.id,
-          workspace: {
-            ...prevData.workspace,
-            fallback_workspace_id: workspace.id,
-            fallback_workspace_slug: workspace.slug,
-            last_workspace_id: workspace.id,
-            last_workspace_slug: workspace.slug,
-          },
+          // workspace: {
+          //   ...prevData.workspace,
+          //   fallback_workspace_id: workspace.id,
+          //   fallback_workspace_slug: workspace.slug,
+          //   last_workspace_id: workspace.id,
+          //   last_workspace_slug: workspace.slug,
+          // },
         };
       },
       false
     );
 
-    await userService
-      .updateUser({ last_workspace_id: workspace.id })
-      .then(() => router.push(`/${workspace.slug}`));
+    await userService.updateUser({ last_workspace_id: workspace.id }).then(() => router.push(`/${workspace.slug}`));
   };
 
   return (
diff --git a/web/pages/error.tsx b/web/pages/error.tsx
deleted file mode 100644
index 19663e68e..000000000
--- a/web/pages/error.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-
-// layouts
-import DefaultLayout from "layouts/default-layout";
-// types
-import type { NextPage } from "next";
-
-const ErrorPage: NextPage = () => (
-  <DefaultLayout>
-    <div className="h-full w-full">
-      <h2 className="text-3xl">Error!</h2>
-    </div>
-  </DefaultLayout>
-);
-
-export default ErrorPage;
diff --git a/web/pages/index.tsx b/web/pages/index.tsx
index cccd32407..d435d1562 100644
--- a/web/pages/index.tsx
+++ b/web/pages/index.tsx
@@ -1,234 +1,13 @@
-import React, { useEffect, useState } from "react";
-import Image from "next/image";
 import type { NextPage } from "next";
-import { useTheme } from "next-themes";
-import useSWR from "swr";
-import { observer } from "mobx-react-lite";
 // layouts
 import DefaultLayout from "layouts/default-layout";
-// services
-import authenticationService from "services/authentication.service";
-import { AppConfigService } from "services/app-config.service";
-// hooks
-import useUserAuth from "hooks/use-user-auth";
-import useToast from "hooks/use-toast";
 // components
-import {
-  GoogleLoginButton,
-  GithubLoginButton,
-  EmailCodeForm,
-  EmailPasswordForm,
-  EmailResetPasswordForm,
-} from "components/account";
-// ui
-import { Spinner } from "components/ui";
-// images
-import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
-// mobx store
-import { useMobxStore } from "lib/mobx/store-provider";
-// types
-import { IUser } from "types";
+import { SignInView } from "components/page-views";
 
-const appConfig = new AppConfigService();
-
-// types
-type EmailPasswordFormValues = {
-  email: string;
-  password?: string;
-  medium?: string;
-};
-
-const HomePage: NextPage = observer(() => {
-  const store: any = useMobxStore();
-  // theme
-  const { setTheme } = useTheme();
-  // user
-  const { isLoading, mutateUser } = useUserAuth("sign-in");
-  // states
-  const [isResettingPassword, setIsResettingPassword] = useState(false);
-  // toast
-  const { setToastAlert } = useToast();
-  // fetch app config
-  const { data } = useSWR("APP_CONFIG", () => appConfig.envConfig());
-
-  const handleTheme = (user: IUser) => {
-    const currentTheme = user.theme.theme ?? "system";
-    setTheme(currentTheme);
-    store?.user?.setCurrentUserSettings();
-  };
-
-  const handleGoogleSignIn = async ({ clientId, credential }: any) => {
-    try {
-      if (clientId && credential) {
-        const socialAuthPayload = {
-          medium: "google",
-          credential,
-          clientId,
-        };
-        const response = await authenticationService.socialAuth(socialAuthPayload);
-        if (response && response?.user) {
-          mutateUser();
-          handleTheme(response?.user);
-        }
-      } else {
-        throw Error("Cant find credentials");
-      }
-    } catch (err: any) {
-      setToastAlert({
-        title: "Error signing in!",
-        type: "error",
-        message:
-          err?.error || "Something went wrong. Please try again later or contact the support team.",
-      });
-    }
-  };
-
-  const handleGitHubSignIn = async (credential: string) => {
-    try {
-      if (data && data.github && credential) {
-        const socialAuthPayload = {
-          medium: "github",
-          credential,
-          clientId: data.github,
-        };
-        const response = await authenticationService.socialAuth(socialAuthPayload);
-        if (response && response?.user) {
-          mutateUser();
-          handleTheme(response?.user);
-        }
-      } else {
-        throw Error("Cant find credentials");
-      }
-    } catch (err: any) {
-      setToastAlert({
-        title: "Error signing in!",
-        type: "error",
-        message:
-          err?.error || "Something went wrong. Please try again later or contact the support team.",
-      });
-    }
-  };
-
-  const handlePasswordSignIn = async (formData: EmailPasswordFormValues) => {
-    await authenticationService
-      .emailLogin(formData)
-      .then((response) => {
-        try {
-          if (response) {
-            mutateUser();
-            handleTheme(response?.user);
-          }
-        } catch (err: any) {
-          setToastAlert({
-            type: "error",
-            title: "Error!",
-            message:
-              err?.error ||
-              "Something went wrong. Please try again later or contact the support team.",
-          });
-        }
-      })
-      .catch((err) =>
-        setToastAlert({
-          type: "error",
-          title: "Error!",
-          message:
-            err?.error ||
-            "Something went wrong. Please try again later or contact the support team.",
-        })
-      );
-  };
-
-  const handleEmailCodeSignIn = async (response: any) => {
-    try {
-      if (response) {
-        mutateUser();
-        handleTheme(response?.user);
-      }
-    } catch (err: any) {
-      setToastAlert({
-        type: "error",
-        title: "Error!",
-        message:
-          err?.error || "Something went wrong. Please try again later or contact the support team.",
-      });
-    }
-  };
-
-  return (
-    <DefaultLayout>
-      {isLoading ? (
-        <div className="grid place-items-center h-screen">
-          <Spinner />
-        </div>
-      ) : (
-        <>
-          <>
-            <div className="hidden sm:block sm:fixed border-r-[0.5px] border-custom-border-200 h-screen w-[0.5px] top-0 left-20 lg:left-32" />
-            <div className="fixed grid place-items-center bg-custom-background-100 sm:py-5 top-11 sm:top-12 left-7 sm:left-16 lg:left-28">
-              <div className="grid place-items-center bg-custom-background-100">
-                <div className="h-[30px] w-[30px]">
-                  <Image src={BluePlaneLogoWithoutText} alt="Plane Logo" />
-                </div>
-              </div>
-            </div>
-          </>
-          <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
-            <div>
-              <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
-                {isResettingPassword ? "Reset your password" : "Sign in to Plane"}
-              </h1>
-              {isResettingPassword ? (
-                <EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
-              ) : (
-                <>
-                  {data?.email_password_login && (
-                    <EmailPasswordForm
-                      onSubmit={handlePasswordSignIn}
-                      setIsResettingPassword={setIsResettingPassword}
-                    />
-                  )}
-                  {data?.magic_login && (
-                    <div className="flex flex-col divide-y divide-custom-border-200">
-                      <div className="pb-7">
-                        <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
-                      </div>
-                    </div>
-                  )}
-                  <div className="flex flex-col items-center justify-center gap-4 pt-7 sm:w-[360px] mx-auto overflow-hidden">
-                    {data?.google && (
-                      <GoogleLoginButton
-                        clientId={data?.google}
-                        handleSignIn={handleGoogleSignIn}
-                      />
-                    )}
-                    {data?.github && (
-                      <GithubLoginButton
-                        clientId={data?.github}
-                        handleSignIn={handleGitHubSignIn}
-                      />
-                    )}
-                  </div>
-                </>
-              )}
-
-              <p className="pt-16 text-custom-text-200 text-sm text-center">
-                By signing up, you agree to the{" "}
-                <a
-                  href="https://plane.so/terms-and-conditions"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="font-medium underline"
-                >
-                  Terms & Conditions
-                </a>
-              </p>
-            </div>
-          </div>
-        </>
-      )}
-    </DefaultLayout>
-  );
-});
+const HomePage: NextPage = () => (
+  <DefaultLayout>
+    <SignInView />
+  </DefaultLayout>
+);
 
 export default HomePage;
diff --git a/web/pages/installations/[provider]/index.tsx b/web/pages/installations/[provider]/index.tsx
index ad5b5a284..cf249f875 100644
--- a/web/pages/installations/[provider]/index.tsx
+++ b/web/pages/installations/[provider]/index.tsx
@@ -3,9 +3,12 @@ import React, { useEffect } from "react";
 import { useRouter } from "next/router";
 
 // services
-import appInstallationsService from "services/app-installations.service";
+import { AppInstallationService } from "services/app_installation.service";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
+
+// services
+const appInstallationService = new AppInstallationService();
 
 const AppPostInstallation = () => {
   const router = useRouter();
@@ -13,7 +16,7 @@ const AppPostInstallation = () => {
 
   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.tsx b/web/pages/invitations/index.tsx
similarity index 86%
rename from web/pages/invitations.tsx
rename to web/pages/invitations/index.tsx
index 8e823b450..5581c93cb 100644
--- a/web/pages/invitations.tsx
+++ b/web/pages/invitations/index.tsx
@@ -1,23 +1,20 @@
 import React, { useState } from "react";
-
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
-
 import useSWR, { mutate } from "swr";
-
-// next-themes
 import { useTheme } from "next-themes";
 // services
-import workspaceService from "services/workspace.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";
 // layouts
 import DefaultLayout from "layouts/default-layout";
-import { UserAuthorizationLayout } from "layouts/auth-layout/user-authorization-wrapper";
+import { UserAuthorizationLayout } from "layouts/auth-layout-legacy/user-authorization-wrapper";
 // ui
-import { SecondaryButton, PrimaryButton, EmptyState } from "components/ui";
+import { Button } from "@plane/ui";
 // icons
 import { CheckCircleIcon } from "@heroicons/react/24/outline";
 // images
@@ -29,13 +26,16 @@ import { truncateText } from "helpers/string.helper";
 // types
 import type { NextPage } from "next";
 import type { IWorkspaceMemberInvitation } from "types";
-// fetch-keys
-import { USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
-import userService from "services/user.service";
+// components
+import { EmptyState } from "components/common";
 
-const OnBoard: NextPage = () => {
+// services
+const workspaceService = new WorkspaceService();
+const userService = new UserService();
+
+const UserInvitationsPage: NextPage = () => {
   const [invitationsRespond, setInvitationsRespond] = useState<string[]>([]);
   const [isJoiningWorkspaces, setIsJoiningWorkspaces] = useState(false);
 
@@ -47,20 +47,15 @@ const OnBoard: NextPage = () => {
 
   const { setToastAlert } = useToast();
 
-  const { data: invitations, mutate: mutateInvitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
+  const { data: invitations } = useSWR<IWorkspaceMemberInvitation[]>("USER_WORKSPACE_INVITATIONS", () =>
     workspaceService.userWorkspaceInvitations()
   );
 
-  const handleInvitation = (
-    workspace_invitation: IWorkspaceMemberInvitation,
-    action: "accepted" | "withdraw"
-  ) => {
+  const handleInvitation = (workspace_invitation: IWorkspaceMemberInvitation, action: "accepted" | "withdraw") => {
     if (action === "accepted") {
       setInvitationsRespond((prevData) => [...prevData, workspace_invitation.id]);
     } else if (action === "withdraw") {
-      setInvitationsRespond((prevData) =>
-        prevData.filter((item: string) => item !== workspace_invitation.id)
-      );
+      setInvitationsRespond((prevData) => prevData.filter((item: string) => item !== workspace_invitation.id));
     }
   };
 
@@ -144,9 +139,7 @@ const OnBoard: NextPage = () => {
                               ? "border-custom-primary-100"
                               : "border-custom-border-200 hover:bg-custom-background-80"
                           }`}
-                          onClick={() =>
-                            handleInvitation(invitation, isSelected ? "withdraw" : "accepted")
-                          }
+                          onClick={() => handleInvitation(invitation, isSelected ? "withdraw" : "accepted")}
                         >
                           <div className="flex-shrink-0">
                             <div className="grid place-items-center h-9 w-9 rounded">
@@ -166,9 +159,7 @@ const OnBoard: NextPage = () => {
                             </div>
                           </div>
                           <div className="min-w-0 flex-1">
-                            <div className="text-sm font-medium">
-                              {truncateText(invitation.workspace.name, 30)}
-                            </div>
+                            <div className="text-sm font-medium">{truncateText(invitation.workspace.name, 30)}</div>
                             <p className="text-xs text-custom-text-200">{ROLE[invitation.role]}</p>
                           </div>
                           <span
@@ -183,7 +174,8 @@ const OnBoard: NextPage = () => {
                     })}
                   </div>
                   <div className="flex items-center gap-3">
-                    <PrimaryButton
+                    <Button
+                      variant="primary"
                       type="submit"
                       size="md"
                       onClick={submitInvitations}
@@ -191,12 +183,12 @@ const OnBoard: NextPage = () => {
                       loading={isJoiningWorkspaces}
                     >
                       Accept & Join
-                    </PrimaryButton>
+                    </Button>
                     <Link href="/">
                       <a>
-                        <SecondaryButton size="md" outline>
+                        <Button variant="neutral-primary" size="md">
                           Go Home
-                        </SecondaryButton>
+                        </Button>
                       </a>
                     </Link>
                   </div>
@@ -222,4 +214,4 @@ const OnBoard: NextPage = () => {
   );
 };
 
-export default OnBoard;
+export default UserInvitationsPage;
diff --git a/web/pages/m/[workspaceSlug]/editor.tsx b/web/pages/m/[workspaceSlug]/editor.tsx
index 55cbe156f..da8c1e054 100644
--- a/web/pages/m/[workspaceSlug]/editor.tsx
+++ b/web/pages/m/[workspaceSlug]/editor.tsx
@@ -14,10 +14,11 @@ import { Controller, useForm } from "react-hook-form";
 import WebViewLayout from "layouts/web-view-layout";
 
 // components
+import { Button, Spinner } from "@plane/ui";
 import { RichTextEditor } from "@plane/rich-text-editor";
-import { PrimaryButton, Spinner } from "components/ui";
-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);
@@ -59,9 +60,7 @@ const Editor: NextPage = () => {
                 deleteFile={fileService.deleteImage}
                 borderOnFocus={false}
                 value={
-                  !value ||
-                  value === "" ||
-                  (typeof value === "object" && Object.keys(value).length === 0)
+                  !value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
                     ? watch("data_html")
                     : value
                 }
@@ -77,8 +76,9 @@ const Editor: NextPage = () => {
             )}
           />
           {isEditable && (
-            <PrimaryButton
-              className="mt-4 w-[calc(100%-30px)] h-[45px] mx-[15px] text-[17px] my-[15px]"
+            <Button
+              variant="primary"
+              className="mt-4 w-[calc(100%-30px)] h-[45px] mx-[15px] text-[17px]"
               onClick={() => {
                 console.log(
                   "submitted",
@@ -89,7 +89,7 @@ const Editor: NextPage = () => {
               }}
             >
               Submit
-            </PrimaryButton>
+            </Button>
           )}
         </div>
       )}
diff --git a/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 47f004783..167b89de7 100644
--- a/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/web/pages/m/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -1,28 +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/issues.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,
@@ -31,23 +22,21 @@ 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;
 
   const isArchive = Boolean(router.query.archive);
 
-  const memberRole = useProjectMembers(
-    workspaceSlug as string,
-    projectId as string,
-    !!workspaceSlug && !!projectId
-  );
+  const memberRole = useProjectMembers(workspaceSlug as string, projectId as string, !!workspaceSlug && !!projectId);
 
   const isAllowed = Boolean((memberRole.isMember || memberRole.isOwner) && !isArchive);
 
@@ -63,25 +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;
@@ -91,8 +75,7 @@ const MobileWebViewIssueDetail_ = () => {
       description: issueDetails.description,
       description_html: issueDetails.description_html,
       state: issueDetails.state,
-      assignees_list:
-        issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
+      assignees_list: issueDetails.assignees_list ?? issueDetails.assignee_details?.map((user) => user.id),
       labels_list: issueDetails.labels_list ?? issueDetails.labels,
       labels: issueDetails.labels_list ?? issueDetails.labels,
     });
@@ -122,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();
@@ -155,9 +138,7 @@ const MobileWebViewIssueDetail_ = () => {
 
   return (
     <WebViewLayout>
-      {isArchive && (
-        <div className="w-full h-screen top-0 left-0 fixed z-50 bg-white/20 pointer-events-none" />
-      )}
+      {isArchive && <div className="w-full h-screen top-0 left-0 fixed z-50 bg-white/20 pointer-events-none" />}
 
       <div className="px-6 py-2 h-full overflow-auto space-y-3">
         <IssueWebViewForm
diff --git a/web/pages/onboarding.tsx b/web/pages/onboarding/index.tsx
similarity index 88%
rename from web/pages/onboarding.tsx
rename to web/pages/onboarding/index.tsx
index 51148b19e..d91211f50 100644
--- a/web/pages/onboarding.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";
@@ -17,17 +17,21 @@ import DefaultLayout from "layouts/default-layout";
 // components
 import { InviteMembers, JoinWorkspaces, UserDetails, Workspace } from "components/onboarding";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 // images
 import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
 import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.svg";
 import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.svg";
 // types
-import { ICurrentUserResponse, IUser, TOnboardingSteps } from "types";
+import { IUser, TOnboardingSteps } from "types";
 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);
 
@@ -38,15 +42,13 @@ const Onboarding: NextPage = () => {
   const { workspaces } = useWorkspaces();
   const userWorkspaces = workspaces?.filter((w) => w.created_by === user?.id);
 
-  const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () =>
-    workspaceService.userWorkspaceInvitations()
-  );
+  const { data: invitations } = useSWR(USER_WORKSPACE_INVITATIONS, () => workspaceService.userWorkspaceInvitations());
 
   // update last active workspace details
   const updateLastWorkspace = async () => {
     if (!workspaces) return;
 
-    await mutate<ICurrentUserResponse>(
+    await mutate<IUser>(
       CURRENT_USER,
       (prevData) => {
         if (!prevData) return prevData;
@@ -54,13 +56,13 @@ const Onboarding: NextPage = () => {
         return {
           ...prevData,
           last_workspace_id: workspaces[0]?.id,
-          workspace: {
-            ...prevData.workspace,
-            fallback_workspace_id: workspaces[0]?.id,
-            fallback_workspace_slug: workspaces[0]?.slug,
-            last_workspace_id: workspaces[0]?.id,
-            last_workspace_slug: workspaces[0]?.slug,
-          },
+          // workspace: {
+          //   ...prevData.workspace,
+          //   fallback_workspace_id: workspaces[0]?.id,
+          //   fallback_workspace_slug: workspaces[0]?.slug,
+          //   last_workspace_id: workspaces[0]?.id,
+          //   last_workspace_slug: workspaces[0]?.slug,
+          // },
         };
       },
       false
@@ -80,7 +82,7 @@ const Onboarding: NextPage = () => {
       },
     };
 
-    mutate<ICurrentUserResponse>(
+    mutate<IUser>(
       CURRENT_USER,
       (prevData) => {
         if (!prevData) return prevData;
@@ -100,7 +102,7 @@ const Onboarding: NextPage = () => {
   const finishOnboarding = async () => {
     if (!user) return;
 
-    mutate<ICurrentUserResponse>(
+    mutate<IUser>(
       CURRENT_USER,
       (prevData) => {
         if (!prevData) return prevData;
@@ -129,13 +131,8 @@ const Onboarding: NextPage = () => {
       if (!onboardingStep.profile_complete && step !== 1) setStep(1);
 
       if (onboardingStep.profile_complete) {
-        if (!onboardingStep.workspace_join && invitations.length > 0 && step !== 2 && step !== 4)
-          setStep(4);
-        else if (
-          !onboardingStep.workspace_create &&
-          (step !== 4 || onboardingStep.workspace_join) &&
-          step !== 2
-        )
+        if (!onboardingStep.workspace_join && invitations.length > 0 && step !== 2 && step !== 4) setStep(4);
+        else if (!onboardingStep.workspace_create && (step !== 4 || onboardingStep.workspace_join) && step !== 2)
           setStep(2);
       }
 
diff --git a/web/pages/workspace-member-invitation.tsx b/web/pages/workspace-invitations/index.tsx
similarity index 91%
rename from web/pages/workspace-member-invitation.tsx
rename to web/pages/workspace-invitations/index.tsx
index e351310a4..dd97afd65 100644
--- a/web/pages/workspace-member-invitation.tsx
+++ b/web/pages/workspace-invitations/index.tsx
@@ -3,23 +3,16 @@ import React from "react";
 
 import { useRouter } from "next/router";
 import useSWR from "swr";
-import {
-  CheckIcon,
-  CubeIcon,
-  ShareIcon,
-  StarIcon,
-  UserIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
+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
 import DefaultLayout from "layouts/default-layout";
 // ui
-import { Spinner } from "components/ui";
+import { Spinner } from "@plane/ui";
 // icons
 import { EmptySpace, EmptySpaceItem } from "components/ui/empty-space";
 // types
@@ -27,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();
 
@@ -77,11 +73,7 @@ const WorkspaceInvitation: NextPage = () => {
                       title={`You are already a member of ${invitationDetail.workspace.name}`}
                       description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
                     >
-                      <EmptySpaceItem
-                        Icon={CubeIcon}
-                        title="Continue to Dashboard"
-                        action={() => router.push("/")}
-                      />
+                      <EmptySpaceItem Icon={CubeIcon} title="Continue to Dashboard" action={() => router.push("/")} />
                     </EmptySpace>
                   </>
                 ) : (
diff --git a/web/public/empty-state/state_graph.svg b/web/public/empty-state/state_graph.svg
index 07337991e..651ea3474 100644
--- a/web/public/empty-state/state_graph.svg
+++ b/web/public/empty-state/state_graph.svg
@@ -2,25 +2,25 @@
 <mask id="path-1-inside-1_6456_90192" fill="white">
 <path d="M34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 7.61116 7.61116 0 17 0C26.3888 0 34 7.61116 34 17ZM5.09529 17C5.09529 23.5748 10.4252 28.9047 17 28.9047C23.5748 28.9047 28.9047 23.5748 28.9047 17C28.9047 10.4252 23.5748 5.09529 17 5.09529C10.4252 5.09529 5.09529 10.4252 5.09529 17Z"/>
 </mask>
-<path d="M34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 7.61116 7.61116 0 17 0C26.3888 0 34 7.61116 34 17ZM5.09529 17C5.09529 23.5748 10.4252 28.9047 17 28.9047C23.5748 28.9047 28.9047 23.5748 28.9047 17C28.9047 10.4252 23.5748 5.09529 17 5.09529C10.4252 5.09529 5.09529 10.4252 5.09529 17Z" fill="#DEE2E6" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-1-inside-1_6456_90192)"/>
+<path d="M34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 7.61116 7.61116 0 17 0C26.3888 0 34 7.61116 34 17ZM5.09529 17C5.09529 23.5748 10.4252 28.9047 17 28.9047C23.5748 28.9047 28.9047 23.5748 28.9047 17C28.9047 10.4252 23.5748 5.09529 17 5.09529C10.4252 5.09529 5.09529 10.4252 5.09529 17Z" fill="#DEE2E6" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-1-inside-1_6456_90192)"/>
 <mask id="path-2-inside-2_6456_90192" fill="white">
 <path d="M17 0C19.8546 3.40409e-08 22.6633 0.718838 25.1669 2.09021C27.6705 3.46158 29.7885 5.44133 31.3255 7.84684C32.8625 10.2524 33.769 13.0062 33.9613 15.8543C34.1537 18.7024 33.6258 21.5531 32.4263 24.1435C31.2268 26.7339 29.3943 28.9804 27.0978 30.6761C24.8013 32.3717 22.1149 33.4617 19.2862 33.8456C16.4575 34.2295 13.5777 33.8949 10.9124 32.8727C8.24708 31.8504 5.8821 30.1735 4.03558 27.9965L7.92131 24.7006C9.21439 26.2251 10.8705 27.3994 12.737 28.1153C14.6034 28.8311 16.6201 29.0654 18.601 28.7966C20.5818 28.5277 22.4631 27.7644 24.0713 26.577C25.6794 25.3896 26.9627 23.8164 27.8027 22.0024C28.6427 20.1885 29.0124 18.1922 28.8776 16.1977C28.7429 14.2032 28.1081 12.2748 27.0318 10.5903C25.9555 8.90572 24.4723 7.51935 22.7191 6.55901C20.9659 5.59867 18.999 5.09529 17 5.09529V0Z"/>
 </mask>
-<path d="M17 0C19.8546 3.40409e-08 22.6633 0.718838 25.1669 2.09021C27.6705 3.46158 29.7885 5.44133 31.3255 7.84684C32.8625 10.2524 33.769 13.0062 33.9613 15.8543C34.1537 18.7024 33.6258 21.5531 32.4263 24.1435C31.2268 26.7339 29.3943 28.9804 27.0978 30.6761C24.8013 32.3717 22.1149 33.4617 19.2862 33.8456C16.4575 34.2295 13.5777 33.8949 10.9124 32.8727C8.24708 31.8504 5.8821 30.1735 4.03558 27.9965L7.92131 24.7006C9.21439 26.2251 10.8705 27.3994 12.737 28.1153C14.6034 28.8311 16.6201 29.0654 18.601 28.7966C20.5818 28.5277 22.4631 27.7644 24.0713 26.577C25.6794 25.3896 26.9627 23.8164 27.8027 22.0024C28.6427 20.1885 29.0124 18.1922 28.8776 16.1977C28.7429 14.2032 28.1081 12.2748 27.0318 10.5903C25.9555 8.90572 24.4723 7.51935 22.7191 6.55901C20.9659 5.59867 18.999 5.09529 17 5.09529V0Z" fill="#ACB5BD" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-2-inside-2_6456_90192)"/>
+<path d="M17 0C19.8546 3.40409e-08 22.6633 0.718838 25.1669 2.09021C27.6705 3.46158 29.7885 5.44133 31.3255 7.84684C32.8625 10.2524 33.769 13.0062 33.9613 15.8543C34.1537 18.7024 33.6258 21.5531 32.4263 24.1435C31.2268 26.7339 29.3943 28.9804 27.0978 30.6761C24.8013 32.3717 22.1149 33.4617 19.2862 33.8456C16.4575 34.2295 13.5777 33.8949 10.9124 32.8727C8.24708 31.8504 5.8821 30.1735 4.03558 27.9965L7.92131 24.7006C9.21439 26.2251 10.8705 27.3994 12.737 28.1153C14.6034 28.8311 16.6201 29.0654 18.601 28.7966C20.5818 28.5277 22.4631 27.7644 24.0713 26.577C25.6794 25.3896 26.9627 23.8164 27.8027 22.0024C28.6427 20.1885 29.0124 18.1922 28.8776 16.1977C28.7429 14.2032 28.1081 12.2748 27.0318 10.5903C25.9555 8.90572 24.4723 7.51935 22.7191 6.55901C20.9659 5.59867 18.999 5.09529 17 5.09529V0Z" fill="#ACB5BD" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-2-inside-2_6456_90192)"/>
 <mask id="path-3-inside-3_6456_90192" fill="white">
 <path d="M17 0C21.3598 5.19899e-08 25.5529 1.67502 28.7128 4.67885C31.8726 7.68269 33.7577 11.7857 33.9782 16.1399C34.1988 20.4941 32.7381 24.7666 29.898 28.0744C27.0578 31.3822 23.0554 33.4724 18.718 33.913C14.3805 34.3536 10.0395 33.1109 6.5923 30.4417C3.14507 27.7726 0.855066 23.881 0.195603 19.5714C-0.46386 15.2618 0.557627 10.8635 3.04894 7.28569C5.54025 3.70783 9.31095 1.22387 13.5817 0.347219L14.6062 5.33844C11.6155 5.95234 8.975 7.69179 7.23039 10.1973C5.48578 12.7028 4.77045 15.7828 5.23226 18.8007C5.69407 21.8186 7.2977 24.5438 9.71173 26.4129C12.1257 28.2821 15.1656 29.1523 18.203 28.8438C21.2405 28.5352 24.0433 27.0715 26.0321 24.7552C28.021 22.4388 29.0439 19.4469 28.8895 16.3977C28.735 13.3486 27.415 10.4753 25.2022 8.37178C22.9894 6.26826 20.0531 5.09529 17 5.09529V0Z"/>
 </mask>
-<path d="M17 0C21.3598 5.19899e-08 25.5529 1.67502 28.7128 4.67885C31.8726 7.68269 33.7577 11.7857 33.9782 16.1399C34.1988 20.4941 32.7381 24.7666 29.898 28.0744C27.0578 31.3822 23.0554 33.4724 18.718 33.913C14.3805 34.3536 10.0395 33.1109 6.5923 30.4417C3.14507 27.7726 0.855066 23.881 0.195603 19.5714C-0.46386 15.2618 0.557627 10.8635 3.04894 7.28569C5.54025 3.70783 9.31095 1.22387 13.5817 0.347219L14.6062 5.33844C11.6155 5.95234 8.975 7.69179 7.23039 10.1973C5.48578 12.7028 4.77045 15.7828 5.23226 18.8007C5.69407 21.8186 7.2977 24.5438 9.71173 26.4129C12.1257 28.2821 15.1656 29.1523 18.203 28.8438C21.2405 28.5352 24.0433 27.0715 26.0321 24.7552C28.021 22.4388 29.0439 19.4469 28.8895 16.3977C28.735 13.3486 27.415 10.4753 25.2022 8.37178C22.9894 6.26826 20.0531 5.09529 17 5.09529V0Z" fill="#CED4DA" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-3-inside-3_6456_90192)"/>
+<path d="M17 0C21.3598 5.19899e-08 25.5529 1.67502 28.7128 4.67885C31.8726 7.68269 33.7577 11.7857 33.9782 16.1399C34.1988 20.4941 32.7381 24.7666 29.898 28.0744C27.0578 31.3822 23.0554 33.4724 18.718 33.913C14.3805 34.3536 10.0395 33.1109 6.5923 30.4417C3.14507 27.7726 0.855066 23.881 0.195603 19.5714C-0.46386 15.2618 0.557627 10.8635 3.04894 7.28569C5.54025 3.70783 9.31095 1.22387 13.5817 0.347219L14.6062 5.33844C11.6155 5.95234 8.975 7.69179 7.23039 10.1973C5.48578 12.7028 4.77045 15.7828 5.23226 18.8007C5.69407 21.8186 7.2977 24.5438 9.71173 26.4129C12.1257 28.2821 15.1656 29.1523 18.203 28.8438C21.2405 28.5352 24.0433 27.0715 26.0321 24.7552C28.021 22.4388 29.0439 19.4469 28.8895 16.3977C28.735 13.3486 27.415 10.4753 25.2022 8.37178C22.9894 6.26826 20.0531 5.09529 17 5.09529V0Z" fill="#CED4DA" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-3-inside-3_6456_90192)"/>
 <mask id="path-4-inside-4_6456_90192" fill="white">
 <path d="M17 0C21.5087 5.37655e-08 25.8327 1.79107 29.0208 4.97918C32.2089 8.1673 34 12.4913 34 17C34 21.5087 32.2089 25.8327 29.0208 29.0208C25.8327 32.2089 21.5087 34 17 34V28.9047C20.1573 28.9047 23.1853 27.6505 25.4179 25.4179C27.6505 23.1853 28.9047 20.1573 28.9047 17C28.9047 13.8427 27.6505 10.8147 25.4179 8.5821C23.1853 6.34953 20.1573 5.09529 17 5.09529V0Z"/>
 </mask>
-<path d="M17 0C21.5087 5.37655e-08 25.8327 1.79107 29.0208 4.97918C32.2089 8.1673 34 12.4913 34 17C34 21.5087 32.2089 25.8327 29.0208 29.0208C25.8327 32.2089 21.5087 34 17 34V28.9047C20.1573 28.9047 23.1853 27.6505 25.4179 25.4179C27.6505 23.1853 28.9047 20.1573 28.9047 17C28.9047 13.8427 27.6505 10.8147 25.4179 8.5821C23.1853 6.34953 20.1573 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-4-inside-4_6456_90192)"/>
+<path d="M17 0C21.5087 5.37655e-08 25.8327 1.79107 29.0208 4.97918C32.2089 8.1673 34 12.4913 34 17C34 21.5087 32.2089 25.8327 29.0208 29.0208C25.8327 32.2089 21.5087 34 17 34V28.9047C20.1573 28.9047 23.1853 27.6505 25.4179 25.4179C27.6505 23.1853 28.9047 20.1573 28.9047 17C28.9047 13.8427 27.6505 10.8147 25.4179 8.5821C23.1853 6.34953 20.1573 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-4-inside-4_6456_90192)"/>
 <mask id="path-5-inside-5_6456_90192" fill="white">
 <path d="M17 0C19.9437 3.51029e-08 22.8369 0.764364 25.3965 2.21827C27.956 3.67217 30.0942 5.76578 31.6017 8.29416C33.1091 10.8225 33.9342 13.699 33.9962 16.642C34.0582 19.5851 33.3549 22.4937 31.9553 25.0833L27.4728 22.6606C28.453 20.8471 28.9455 18.8103 28.9021 16.7493C28.8587 14.6884 28.2809 12.6741 27.2252 10.9035C26.1696 9.13293 24.6722 7.66682 22.8798 6.64869C21.0874 5.63055 19.0614 5.09529 17 5.09529V0Z"/>
 </mask>
-<path d="M17 0C19.9437 3.51029e-08 22.8369 0.764364 25.3965 2.21827C27.956 3.67217 30.0942 5.76578 31.6017 8.29416C33.1091 10.8225 33.9342 13.699 33.9962 16.642C34.0582 19.5851 33.3549 22.4937 31.9553 25.0833L27.4728 22.6606C28.453 20.8471 28.9455 18.8103 28.9021 16.7493C28.8587 14.6884 28.2809 12.6741 27.2252 10.9035C26.1696 9.13293 24.6722 7.66682 22.8798 6.64869C21.0874 5.63055 19.0614 5.09529 17 5.09529V0Z" fill="#DEE2E6" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-5-inside-5_6456_90192)"/>
+<path d="M17 0C19.9437 3.51029e-08 22.8369 0.764364 25.3965 2.21827C27.956 3.67217 30.0942 5.76578 31.6017 8.29416C33.1091 10.8225 33.9342 13.699 33.9962 16.642C34.0582 19.5851 33.3549 22.4937 31.9553 25.0833L27.4728 22.6606C28.453 20.8471 28.9455 18.8103 28.9021 16.7493C28.8587 14.6884 28.2809 12.6741 27.2252 10.9035C26.1696 9.13293 24.6722 7.66682 22.8798 6.64869C21.0874 5.63055 19.0614 5.09529 17 5.09529V0Z" fill="#DEE2E6" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-5-inside-5_6456_90192)"/>
 <mask id="path-6-inside-6_6456_90192" fill="white">
 <path d="M17 0C20.6461 4.34798e-08 24.1957 1.17228 27.1246 3.34381C30.0536 5.51533 32.2068 8.57102 33.2664 12.0598L28.391 13.5405C27.649 11.0974 26.1411 8.95755 24.0901 7.43688C22.039 5.91621 19.5533 5.09529 17 5.09529V0Z"/>
 </mask>
-<path d="M17 0C20.6461 4.34798e-08 24.1957 1.17228 27.1246 3.34381C30.0536 5.51533 32.2068 8.57102 33.2664 12.0598L28.391 13.5405C27.649 11.0974 26.1411 8.95755 24.0901 7.43688C22.039 5.91621 19.5533 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-6-inside-6_6456_90192)"/>
+<path d="M17 0C20.6461 4.34798e-08 24.1957 1.17228 27.1246 3.34381C30.0536 5.51533 32.2068 8.57102 33.2664 12.0598L28.391 13.5405C27.649 11.0974 26.1411 8.95755 24.0901 7.43688C22.039 5.91621 19.5533 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-6-inside-6_6456_90192)"/>
 </svg>
diff --git a/web/public/services/json.svg b/web/public/services/json.svg
index 4c2df2222..0fe32e276 100644
--- a/web/public/services/json.svg
+++ b/web/public/services/json.svg
@@ -2,7 +2,7 @@
 <g clip-path="url(#clip0_6990_114394)">
 <rect width="24" height="24" rx="12" fill="#FAFAFA"/>
 <path d="M13.4583 6.1665H8.49992C8.1905 6.1665 7.89375 6.28942 7.67496 6.50821C7.45617 6.72701 7.33325 7.02375 7.33325 7.33317V16.6665C7.33325 16.9759 7.45617 17.2727 7.67496 17.4915C7.89375 17.7103 8.1905 17.8332 8.49992 17.8332H15.4999C15.8093 17.8332 16.1061 17.7103 16.3249 17.4915C16.5437 17.2727 16.6666 16.9759 16.6666 16.6665V9.37484L13.4583 6.1665Z" stroke="#3F76FF" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M13.1665 6.1665V9.6665H16.6665M10.8332 11.9998C10.6785 11.9998 10.5301 12.0613 10.4207 12.1707C10.3113 12.2801 10.2498 12.4285 10.2498 12.5832V13.1665C10.2498 13.3212 10.1884 13.4696 10.079 13.579C9.96959 13.6884 9.82121 13.7498 9.6665 13.7498C9.82121 13.7498 9.96959 13.8113 10.079 13.9207C10.1884 14.0301 10.2498 14.1785 10.2498 14.3332V14.9165C10.2498 15.0712 10.3113 15.2196 10.4207 15.329C10.5301 15.4384 10.6785 15.4998 10.8332 15.4998M13.1665 15.4998C13.3212 15.4998 13.4696 15.4384 13.579 15.329C13.6884 15.2196 13.7498 15.0712 13.7498 14.9165V14.3332C13.7498 14.1785 13.8113 14.0301 13.9207 13.9207C14.0301 13.8113 14.1785 13.7498 14.3332 13.7498C14.1785 13.7498 14.0301 13.6884 13.9207 13.579C13.8113 13.4696 13.7498 13.3212 13.7498 13.1665V12.5832C13.7498 12.4285 13.6884 12.2801 13.579 12.1707C13.4696 12.0613 13.3212 11.9998 13.1665 11.9998" stroke="#3F76FF" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.1665 6.1665V9.6665H16.6665M10.8332 11.9998C10.6785 11.9998 10.5301 12.0613 10.4207 12.1707C10.3113 12.2801 10.2498 12.4285 10.2498 12.5832V13.1665C10.2498 13.3212 10.1884 13.4696 10.079 13.579C9.96959 13.6884 9.82121 13.7498 9.6665 13.7498C9.82121 13.7498 9.96959 13.8113 10.079 13.9207C10.1884 14.0301 10.2498 14.1785 10.2498 14.3332V14.9165C10.2498 15.0712 10.3113 15.2196 10.4207 15.329C10.5301 15.4384 10.6785 15.4998 10.8332 15.4998M13.1665 15.4998C13.3212 15.4998 13.4696 15.4384 13.579 15.329C13.6884 15.2196 13.7498 15.0712 13.7498 14.9165V14.3332C13.7498 14.1785 13.8113 14.0301 13.9207 13.9207C14.0301 13.8113 14.1785 13.7498 14.3332 13.7498C14.1785 13.7498 14.0301 13.6884 13.9207 13.579C13.8113 13.4696 13.7498 13.3212 13.7498 13.1665V12.5832C13.7498 12.4285 13.6884 12.2801 13.579 12.1707C13.4696 12.0613 13.3212 11.9998 13.1665 11.9998" stroke="#3F76FF" strokeWidth="0.75" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
 <defs>
 <clipPath id="clip0_6990_114394">
diff --git a/web/services/ai.service.ts b/web/services/ai.service.ts
index fb14b6a93..63bf02ee4 100644
--- a/web/services/ai.service.ts
+++ b/web/services/ai.service.ts
@@ -1,11 +1,13 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import { ICurrentUserResponse, IGptResponse } from "types";
+import { IUser, IGptResponse } from "types";
 // helpers
 import { API_BASE_URL } from "helpers/common.helper";
 
-class AiServices extends APIService {
+const trackEventService = new TrackEventService();
+
+export class AIService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -14,11 +16,11 @@ class AiServices extends APIService {
     workspaceSlug: string,
     projectId: string,
     data: { prompt: string; task: string },
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<IGptResponse> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/ai-assistant/`, data)
       .then((response) => {
-        trackEventServices.trackAskGptEvent(response?.data, "ASK_GPT", user);
+        trackEventService.trackAskGptEvent(response?.data, "ASK_GPT", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -26,5 +28,3 @@ class AiServices extends APIService {
       });
   }
 }
-
-export default new AiServices();
diff --git a/web/services/analytics.service.ts b/web/services/analytics.service.ts
index 66b6569e8..38d0ab774 100644
--- a/web/services/analytics.service.ts
+++ b/web/services/analytics.service.ts
@@ -1,5 +1,5 @@
 // services
-import APIService from "services/api.service";
+import { APIService } from "services/api.service";
 // types
 import {
   IAnalyticsParams,
@@ -8,9 +8,10 @@ import {
   IExportAnalyticsFormData,
   ISaveAnalyticsFormData,
 } from "types";
+// helpers
 import { API_BASE_URL } from "helpers/common.helper";
 
-class AnalyticsServices extends APIService {
+export class AnalyticsService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -60,5 +61,3 @@ class AnalyticsServices extends APIService {
       });
   }
 }
-
-export default new AnalyticsServices();
diff --git a/web/services/api.service.ts b/web/services/api.service.ts
index c71c75ba8..621bac767 100644
--- a/web/services/api.service.ts
+++ b/web/services/api.service.ts
@@ -1,46 +1,7 @@
 import axios from "axios";
 import Cookies from "js-cookie";
 
-const unAuthorizedStatus = [401];
-const nonValidatedRoutes = [
-  "/",
-  "/magic-sign-in",
-  "/reset-password",
-  "/workspace-member-invitation",
-  "/sign-up",
-  "/m/",
-];
-
-const validateRouteCheck = (route: string): boolean => {
-  let validationToggle = false;
-
-  let routeCheck = false;
-  nonValidatedRoutes.forEach((_route: string) => {
-    if (route.includes(_route)) {
-      routeCheck = true;
-    }
-  });
-
-  if (routeCheck) validationToggle = true;
-  return validationToggle;
-};
-
-axios.interceptors.response.use(
-  (response) => response,
-  (error) => {
-    const { status }: any = error.response;
-    if (!validateRouteCheck(window.location.pathname)) {
-      if (unAuthorizedStatus.includes(status)) {
-        Cookies.remove("refreshToken", { path: "/" });
-        Cookies.remove("accessToken", { path: "/" });
-        window.location.href = `/?next_url=${window.location.pathname}`;
-      }
-    }
-    return Promise.reject(error);
-  }
-);
-
-abstract class APIService {
+export abstract class APIService {
   protected baseURL: string;
   protected headers: any = {};
 
@@ -78,15 +39,6 @@ abstract class APIService {
     };
   }
 
-  getWithoutBase(url: string, config = {}): Promise<any> {
-    return axios({
-      method: "get",
-      url: url,
-      headers: this.getAccessToken() ? this.getHeaders() : {},
-      ...config,
-    });
-  }
-
   get(url: string, config = {}): Promise<any> {
     return axios({
       method: "get",
@@ -136,21 +88,7 @@ abstract class APIService {
     });
   }
 
-  mediaUpload(url: string, data = {}, config = {}): Promise<any> {
-    return axios({
-      method: "post",
-      url: this.baseURL + url,
-      data,
-      headers: this.getAccessToken()
-        ? { ...this.getHeaders(), "Content-Type": "multipart/form-data" }
-        : {},
-      ...config,
-    });
-  }
-
   request(config = {}) {
     return axios(config);
   }
 }
-
-export default APIService;
diff --git a/web/services/app-config.service.ts b/web/services/app_config.service.ts
similarity index 92%
rename from web/services/app-config.service.ts
rename to web/services/app_config.service.ts
index 713cda3da..5843c01c9 100644
--- a/web/services/app-config.service.ts
+++ b/web/services/app_config.service.ts
@@ -1,5 +1,5 @@
 // services
-import APIService from "services/api.service";
+import { APIService } from "services/api.service";
 // helper
 import { API_BASE_URL } from "helpers/common.helper";
 
diff --git a/web/services/app-installations.service.ts b/web/services/app_installation.service.ts
similarity index 90%
rename from web/services/app-installations.service.ts
rename to web/services/app_installation.service.ts
index 8b18cddfc..2a7a4ea6a 100644
--- a/web/services/app-installations.service.ts
+++ b/web/services/app_installation.service.ts
@@ -1,9 +1,9 @@
 // services
-import axios from "axios";
-import APIService from "services/api.service";
+import { APIService } from "services/api.service";
+// helpers
 import { API_BASE_URL } from "helpers/common.helper";
 
-class AppInstallationsService extends APIService {
+export class AppInstallationService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -62,7 +62,7 @@ class AppInstallationsService extends APIService {
   }
 
   async getSlackAuthDetails(code: string): Promise<any> {
-    const response = await axios({
+    const response = await this.request({
       method: "post",
       url: "/api/slack-redirect",
       data: {
@@ -73,5 +73,3 @@ class AppInstallationsService extends APIService {
     return response.data;
   }
 }
-
-export default new AppInstallationsService();
diff --git a/web/services/authentication.service.ts b/web/services/auth.service.ts
similarity index 78%
rename from web/services/authentication.service.ts
rename to web/services/auth.service.ts
index 58eaa2aff..f7dd9e94c 100644
--- a/web/services/authentication.service.ts
+++ b/web/services/auth.service.ts
@@ -1,14 +1,19 @@
 // services
-import APIService from "services/api.service";
-import { ICurrentUserResponse } from "types";
+import { APIService } from "services/api.service";
+// helpers
 import { API_BASE_URL } from "helpers/common.helper";
 
-class AuthService extends APIService {
+export interface ILoginTokenResponse {
+  access_token: string;
+  refresh_toke: string;
+}
+
+export class AuthService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
 
-  async emailLogin(data: any) {
+  async emailLogin(data: any): Promise<ILoginTokenResponse> {
     return this.post("/api/sign-in/", data, { headers: {} })
       .then((response) => {
         this.setAccessToken(response?.data?.access_token);
@@ -20,7 +25,7 @@ class AuthService extends APIService {
       });
   }
 
-  async emailSignUp(data: { email: string; password: string }) {
+  async emailSignUp(data: { email: string; password: string }): Promise<ILoginTokenResponse> {
     return this.post("/api/sign-up/", data, { headers: {} })
       .then((response) => {
         this.setAccessToken(response?.data?.access_token);
@@ -32,11 +37,7 @@ class AuthService extends APIService {
       });
   }
 
-  async socialAuth(data: any): Promise<{
-    access_token: string;
-    refresh_toke: string;
-    user: ICurrentUserResponse;
-  }> {
+  async socialAuth(data: any): Promise<ILoginTokenResponse> {
     return this.post("/api/social-auth/", data, { headers: {} })
       .then((response) => {
         this.setAccessToken(response?.data?.access_token);
@@ -48,7 +49,7 @@ class AuthService extends APIService {
       });
   }
 
-  async emailCode(data: any) {
+  async emailCode(data: any): Promise<any> {
     return this.post("/api/magic-generate/", data, { headers: {} })
       .then((response) => response?.data)
       .catch((error) => {
@@ -56,7 +57,7 @@ class AuthService extends APIService {
       });
   }
 
-  async magicSignIn(data: any) {
+  async magicSignIn(data: any): Promise<any> {
     const response = await this.post("/api/magic-sign-in/", data, { headers: {} });
     if (response?.status === 200) {
       this.setAccessToken(response?.data?.access_token);
@@ -66,7 +67,7 @@ class AuthService extends APIService {
     throw response.response.data;
   }
 
-  async signOut() {
+  async signOut(): Promise<any> {
     return this.post("/api/sign-out/", { refresh_token: this.getRefreshToken() })
       .then((response) => {
         this.purgeAccessToken();
@@ -80,5 +81,3 @@ class AuthService extends APIService {
       });
   }
 }
-
-export default new AuthService();
diff --git a/web/services/cycles.service.ts b/web/services/cycle.service.ts
similarity index 54%
rename from web/services/cycles.service.ts
rename to web/services/cycle.service.ts
index b83b1fb6a..65188515c 100644
--- a/web/services/cycles.service.ts
+++ b/web/services/cycle.service.ts
@@ -1,24 +1,22 @@
 // services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import type { CycleDateCheckData, ICurrentUserResponse, ICycle, IIssue } from "types";
+import type { CycleDateCheckData, IUser, ICycle, IIssue } from "types";
+// helpers
 import { API_BASE_URL } from "helpers/common.helper";
 
-class ProjectCycleServices extends APIService {
+const trackEventService = new TrackEventService();
+
+export class CycleService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
 
-  async createCycle(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async createCycle(workspaceSlug: string, projectId: string, data: any, user: any): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/`, data)
       .then((response) => {
-        trackEventServices.trackCycleEvent(response?.data, "CYCLE_CREATE", user);
+        trackEventService.trackCycleEvent(response?.data, "CYCLE_CREATE", user);
         return response?.data;
       })
       .catch((error) => {
@@ -42,11 +40,7 @@ class ProjectCycleServices extends APIService {
       });
   }
 
-  async getCycleDetails(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string
-  ): Promise<ICycle> {
+  async getCycleDetails(workspaceSlug: string, projectId: string, cycleId: string): Promise<ICycle> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
       .then((res) => res?.data)
       .catch((err) => {
@@ -54,14 +48,8 @@ class ProjectCycleServices extends APIService {
       });
   }
 
-  async getCycleIssues(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string
-  ): Promise<IIssue[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`
-    )
+  async getCycleIssues(workspaceSlug: string, projectId: string, cycleId: string): Promise<IIssue[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -74,10 +62,9 @@ class ProjectCycleServices extends APIService {
     cycleId: string,
     queries?: any
   ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`,
-      { params: queries }
-    )
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`, {
+      params: queries,
+    })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -89,14 +76,11 @@ class ProjectCycleServices extends APIService {
     projectId: string,
     cycleId: string,
     data: any,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
-    return this.put(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`,
-      data
-    )
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`, data)
       .then((response) => {
-        trackEventServices.trackCycleEvent(response?.data, "CYCLE_UPDATE", user);
+        trackEventService.trackCycleEvent(response?.data, "CYCLE_UPDATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -109,14 +93,11 @@ class ProjectCycleServices extends APIService {
     projectId: string,
     cycleId: string,
     data: Partial<ICycle>,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`,
-      data
-    )
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`, data)
       .then((response) => {
-        trackEventServices.trackCycleEvent(response?.data, "CYCLE_UPDATE", user);
+        trackEventService.trackCycleEvent(response?.data, "CYCLE_UPDATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -124,15 +105,10 @@ class ProjectCycleServices extends APIService {
       });
   }
 
-  async deleteCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async deleteCycle(workspaceSlug: string, projectId: string, cycleId: string, user: IUser | undefined): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/`)
       .then((response) => {
-        trackEventServices.trackCycleEvent(response?.data, "CYCLE_DELETE", user);
+        trackEventService.trackCycleEvent(response?.data, "CYCLE_DELETE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -140,15 +116,8 @@ class ProjectCycleServices extends APIService {
       });
   }
 
-  async cycleDateCheck(
-    workspaceSlug: string,
-    projectId: string,
-    data: CycleDateCheckData
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/date-check/`,
-      data
-    )
+  async cycleDateCheck(workspaceSlug: string, projectId: string, data: CycleDateCheckData): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/date-check/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -162,10 +131,7 @@ class ProjectCycleServices extends APIService {
       cycle: string;
     }
   ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/`,
-      data
-    )
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -180,29 +146,18 @@ class ProjectCycleServices extends APIService {
       new_cycle_id: string;
     }
   ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/transfer-issues/`,
-      data
-    )
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/transfer-issues/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 
-  async removeCycleFromFavorites(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/${cycleId}/`
-    )
+  async removeCycleFromFavorites(workspaceSlug: string, projectId: string, cycleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-cycles/${cycleId}/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 }
-
-export default new ProjectCycleServices();
diff --git a/web/services/file.service.ts b/web/services/file.service.ts
index 2b7bdb651..0e3749a4c 100644
--- a/web/services/file.service.ts
+++ b/web/services/file.service.ts
@@ -1,8 +1,9 @@
 // services
-import APIService from "services/api.service";
+import { APIService } from "services/api.service";
+// helpers
 import { API_BASE_URL } from "helpers/common.helper";
 
-interface UnSplashImage {
+export interface UnSplashImage {
   id: string;
   created_at: Date;
   updated_at: Date;
@@ -17,7 +18,7 @@ interface UnSplashImage {
   [key: string]: any;
 }
 
-interface UnSplashImageUrls {
+export interface UnSplashImageUrls {
   raw: string;
   full: string;
   regular: string;
@@ -26,7 +27,7 @@ interface UnSplashImageUrls {
   small_s3: string;
 }
 
-class FileService extends APIService {
+export class FileService extends APIService {
   constructor() {
     super(API_BASE_URL);
     this.uploadFile = this.uploadFile.bind(this);
@@ -77,7 +78,12 @@ class FileService extends APIService {
   }
 
   async uploadUserFile(file: FormData): Promise<any> {
-    return this.mediaUpload(`/api/users/file-assets/`, file)
+    return this.post(`/api/users/file-assets/`, file, {
+      headers: {
+        ...this.getHeaders(),
+        "Content-Type": "multipart/form-data",
+      },
+    })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -115,7 +121,3 @@ class FileService extends APIService {
       });
   }
 }
-
-const fileService = new FileService();
-
-export default fileService;
diff --git a/web/services/inbox.service.ts b/web/services/inbox.service.ts
index 9df693e99..06453de81 100644
--- a/web/services/inbox.service.ts
+++ b/web/services/inbox.service.ts
@@ -1,17 +1,13 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// helpers
 import { API_BASE_URL } from "helpers/common.helper";
 // types
-import type {
-  IInboxIssue,
-  IInbox,
-  TInboxStatus,
-  IInboxIssueDetail,
-  ICurrentUserResponse,
-  IInboxQueryParams,
-} from "types";
+import type { IInboxIssue, IInbox, TInboxStatus, IInboxIssueDetail, IUser, IInboxQueryParams } from "types";
 
-class InboxServices extends APIService {
+const trackEventService = new TrackEventService();
+
+export class InboxService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -32,16 +28,8 @@ class InboxServices extends APIService {
       });
   }
 
-  async patchInbox(
-    workspaceSlug: string,
-    projectId: string,
-    inboxId: string,
-    data: Partial<IInbox>
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/`,
-      data
-    )
+  async patchInbox(workspaceSlug: string, projectId: string, inboxId: string, data: Partial<IInbox>): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -54,10 +42,9 @@ class InboxServices extends APIService {
     inboxId: string,
     params?: IInboxQueryParams
   ): Promise<IInboxIssue[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`,
-      { params }
-    )
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`, {
+      params,
+    })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -84,13 +71,13 @@ class InboxServices extends APIService {
     projectId: string,
     inboxId: string,
     inboxIssueId: string,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
     return this.delete(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`
     )
       .then((response) => {
-        trackEventServices.trackInboxEvent(response?.data, "INBOX_ISSUE_DELETE", user);
+        trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_DELETE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -104,7 +91,7 @@ class InboxServices extends APIService {
     inboxId: string,
     inboxIssueId: string,
     data: TInboxStatus,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<IInboxIssue> {
     return this.patch(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`,
@@ -119,7 +106,7 @@ class InboxServices extends APIService {
             : data.status === 1
             ? "INBOX_ISSUE_ACCEPTED"
             : "INBOX_ISSUE_DUPLICATED";
-        trackEventServices.trackInboxEvent(response?.data, action, user);
+        trackEventService.trackInboxEvent(response?.data, action, user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -133,14 +120,14 @@ class InboxServices extends APIService {
     inboxId: string,
     inboxIssueId: string,
     data: { issue: Partial<IInboxIssue> },
-    user: ICurrentUserResponse | undefined
+    user: IUser
   ): Promise<IInboxIssue> {
     return this.patch(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/${inboxIssueId}/`,
       data
     )
       .then((response) => {
-        trackEventServices.trackInboxEvent(response?.data, "INBOX_ISSUE_UPDATE", user);
+        trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_UPDATE", user);
         return response?.data;
       })
       .catch((error) => {
@@ -153,14 +140,11 @@ class InboxServices extends APIService {
     projectId: string,
     inboxId: string,
     data: any,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<IInboxIssueDetail> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`,
-      data
-    )
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/inboxes/${inboxId}/inbox-issues/`, data)
       .then((response) => {
-        trackEventServices.trackInboxEvent(response?.data, "INBOX_ISSUE_CREATE", user);
+        trackEventService.trackInboxEvent(response?.data, "INBOX_ISSUE_CREATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -168,7 +152,3 @@ class InboxServices extends APIService {
       });
   }
 }
-
-const inboxServices = new InboxServices();
-
-export default inboxServices;
diff --git a/web/services/integration/github.service.ts b/web/services/integrations/github.service.ts
similarity index 51%
rename from web/services/integration/github.service.ts
rename to web/services/integrations/github.service.ts
index b546f95cb..bec6101e5 100644
--- a/web/services/integration/github.service.ts
+++ b/web/services/integrations/github.service.ts
@@ -1,29 +1,28 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// helpers
 import { API_BASE_URL } from "helpers/common.helper";
-
-import { ICurrentUserResponse, IGithubRepoInfo, IGithubServiceImportFormData } from "types";
+// types
+import { IUser, IGithubRepoInfo, IGithubServiceImportFormData } from "types";
 
 const integrationServiceType: string = "github";
-class GithubIntegrationService extends APIService {
+
+const trackEventService = new TrackEventService();
+
+export class GithubIntegrationService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
 
   async listAllRepositories(workspaceSlug: string, integrationSlug: string): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationSlug}/github-repositories`
-    )
+    return this.get(`/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationSlug}/github-repositories`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 
-  async getGithubRepoInfo(
-    workspaceSlug: string,
-    params: { owner: string; repo: string }
-  ): Promise<IGithubRepoInfo> {
+  async getGithubRepoInfo(workspaceSlug: string, params: { owner: string; repo: string }): Promise<IGithubRepoInfo> {
     return this.get(`/api/workspaces/${workspaceSlug}/importers/${integrationServiceType}/`, {
       params,
     })
@@ -36,14 +35,11 @@ class GithubIntegrationService extends APIService {
   async createGithubServiceImport(
     workspaceSlug: string,
     data: IGithubServiceImportFormData,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/importers/${integrationServiceType}/`,
-      data
-    )
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/importers/${integrationServiceType}/`, data)
       .then((response) => {
-        trackEventServices.trackImporterEvent(response?.data, "GITHUB_IMPORTER_CREATE", user);
+        trackEventService.trackImporterEvent(response?.data, "GITHUB_IMPORTER_CREATE", user);
         return response?.data;
       })
       .catch((error) => {
@@ -51,5 +47,3 @@ class GithubIntegrationService extends APIService {
       });
   }
 }
-
-export default new GithubIntegrationService();
diff --git a/web/services/integrations/index.ts b/web/services/integrations/index.ts
new file mode 100644
index 000000000..cf9a070ee
--- /dev/null
+++ b/web/services/integrations/index.ts
@@ -0,0 +1,3 @@
+export * from "./github.service";
+export * from "./integration.service";
+export * from "./jira.service";
diff --git a/web/services/integration/index.ts b/web/services/integrations/integration.service.ts
similarity index 77%
rename from web/services/integration/index.ts
rename to web/services/integrations/integration.service.ts
index 9b777576f..e36ea4889 100644
--- a/web/services/integration/index.ts
+++ b/web/services/integrations/integration.service.ts
@@ -1,17 +1,13 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import {
-  IAppIntegration,
-  ICurrentUserResponse,
-  IImporterService,
-  IWorkspaceIntegration,
-  IExportServiceResponse,
-} from "types";
+import { IAppIntegration, IUser, IImporterService, IWorkspaceIntegration, IExportServiceResponse } from "types";
+// helper
 import { API_BASE_URL } from "helpers/common.helper";
 
-class IntegrationService extends APIService {
+const trackEventService = new TrackEventService();
+
+export class IntegrationService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -33,9 +29,7 @@ class IntegrationService extends APIService {
   }
 
   async deleteWorkspaceIntegration(workspaceSlug: string, integrationId: string): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationId}/provider/`
-    )
+    return this.delete(`/api/workspaces/${workspaceSlug}/workspace-integrations/${integrationId}/provider/`)
       .then((res) => res?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -70,12 +64,12 @@ class IntegrationService extends APIService {
     workspaceSlug: string,
     service: string,
     importerId: string,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/importers/${service}/${importerId}/`)
       .then((response) => {
         const eventName = service === "github" ? "GITHUB_IMPORTER_DELETE" : "JIRA_IMPORTER_DELETE";
-        trackEventServices.trackImporterEvent(response?.data, eventName, user);
+        trackEventService.trackImporterEvent(response?.data, eventName, user);
         return response?.data;
       })
       .catch((error) => {
@@ -83,5 +77,3 @@ class IntegrationService extends APIService {
       });
   }
 }
-
-export default new IntegrationService();
diff --git a/web/services/integration/jira.service.ts b/web/services/integrations/jira.service.ts
similarity index 61%
rename from web/services/integration/jira.service.ts
rename to web/services/integrations/jira.service.ts
index 5755f404b..744dc2b11 100644
--- a/web/services/integration/jira.service.ts
+++ b/web/services/integrations/jira.service.ts
@@ -1,10 +1,12 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
 import { API_BASE_URL } from "helpers/common.helper";
 // types
-import { IJiraMetadata, IJiraResponse, IJiraImporterForm, ICurrentUserResponse } from "types";
+import { IJiraMetadata, IJiraResponse, IJiraImporterForm, IUser } from "types";
 
-class JiraImportedService extends APIService {
+const trackEventService = new TrackEventService();
+
+export class JiraImporterService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -22,11 +24,11 @@ class JiraImportedService extends APIService {
   async createJiraImporter(
     workspaceSlug: string,
     data: IJiraImporterForm,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<IJiraResponse> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/importers/jira/`, data)
       .then((response) => {
-        trackEventServices.trackImporterEvent(response?.data, "JIRA_IMPORTER_CREATE", user);
+        trackEventService.trackImporterEvent(response?.data, "JIRA_IMPORTER_CREATE", user);
         return response?.data;
       })
       .catch((error) => {
@@ -34,7 +36,3 @@ class JiraImportedService extends APIService {
       });
   }
 }
-
-const jiraImporterService = new JiraImportedService();
-
-export default jiraImporterService;
diff --git a/web/services/issue/index.ts b/web/services/issue/index.ts
new file mode 100644
index 000000000..2f92d6429
--- /dev/null
+++ b/web/services/issue/index.ts
@@ -0,0 +1,7 @@
+export * from "./issue_archive.service";
+export * from "./issue.service";
+export * from "./issue_draft.service";
+export * from "./issue_reaction.service";
+export * from "./issue_label.service";
+export * from "./issue_attachment.service";
+export * from "./issue_comment.service";
diff --git a/web/services/issue/issue.service.ts b/web/services/issue/issue.service.ts
new file mode 100644
index 000000000..c0bb15980
--- /dev/null
+++ b/web/services/issue/issue.service.ts
@@ -0,0 +1,287 @@
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// type
+import type { IUser, IIssue, IIssueActivity, ISubIssueResponse } from "types";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class IssueService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createIssues(workspaceSlug: string, projectId: string, data: any, user: IUser | undefined): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, data)
+      .then((response) => {
+        trackEventService.trackIssueEvent(response.data, "ISSUE_CREATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssues(workspaceSlug: string, projectId: string): Promise<IIssue[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssuesWithParams(
+    workspaceSlug: string,
+    projectId: string,
+    queries?: any
+  ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, {
+      params: queries,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieve(workspaceSlug: string, projectId: string, issueId: string): Promise<IIssue> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueActivities(workspaceSlug: string, projectId: string, issueId: string): Promise<IIssueActivity[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/history/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueProperties(workspaceSlug: string, projectId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addIssueToCycle(
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    data: {
+      issues: string[];
+    },
+    user: IUser | undefined
+  ) {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`, data)
+      .then((response) => {
+        trackEventService.trackIssueMovedToCycleOrModuleEvent(
+          {
+            workspaceSlug,
+            workspaceName: response?.data?.[0]?.issue_detail?.workspace_detail?.name,
+            projectId,
+            projectIdentifier: response?.data?.[0]?.issue_detail?.project_detail?.identifier,
+            projectName: response?.data?.[0]?.issue_detail?.project_detail?.name,
+            issueId: response?.data?.[0]?.issue_detail?.id,
+            cycleId,
+          },
+          response.data.length > 1 ? "ISSUE_MOVED_TO_CYCLE_IN_BULK" : "ISSUE_MOVED_TO_CYCLE",
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeIssueFromCycle(workspaceSlug: string, projectId: string, cycleId: string, bridgeId: string) {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/${bridgeId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueRelation(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    user: IUser,
+    data: {
+      related_list: Array<{
+        relation_type: "duplicate" | "relates_to" | "blocked_by";
+        related_issue: string;
+      }>;
+      relation?: "blocking" | null;
+    }
+  ) {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/`, data)
+      .then((response) => {
+        trackEventService.trackIssueRelationEvent(response.data, "ISSUE_RELATION_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueRelation(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    relationId: string,
+    user: IUser
+  ) {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/${relationId}/`
+    )
+      .then((response) => {
+        trackEventService.trackIssueRelationEvent(response.data, "ISSUE_RELATION_DELETE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createIssueProperties(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssueProperties(
+    workspaceSlug: string,
+    projectId: string,
+    issuePropertyId: string,
+    data: any
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/` + `${issuePropertyId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssue(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<IIssue>,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`, data)
+      .then((response) => {
+        trackEventService.trackIssueEvent(response.data, "ISSUE_UPDATE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssue(workspaceSlug: string, projectId: string, issuesId: string, user: IUser | undefined): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issuesId}/`)
+      .then((response) => {
+        trackEventService.trackIssueEvent({ issuesId }, "ISSUE_DELETE", user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async bulkDeleteIssues(workspaceSlug: string, projectId: string, data: any, user: IUser | undefined): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-delete-issues/`, data)
+      .then((response) => {
+        trackEventService.trackIssueBulkDeleteEvent(data, user as IUser);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async subIssues(workspaceSlug: string, projectId: string, issueId: string): Promise<ISubIssueResponse> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addSubIssues(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: { sub_issue_ids: string[] }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueLink(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: {
+      metadata: any;
+      title: string;
+      url: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateIssueLink(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    linkId: string,
+    data: {
+      metadata: any;
+      title: string;
+      url: string;
+    }
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteIssueLink(workspaceSlug: string, projectId: string, issueId: string, linkId: string): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/issue/issue_archive.service.ts b/web/services/issue/issue_archive.service.ts
new file mode 100644
index 000000000..02cb6357e
--- /dev/null
+++ b/web/services/issue/issue_archive.service.ts
@@ -0,0 +1,43 @@
+import { APIService } from "services/api.service";
+// type
+import { API_BASE_URL } from "helpers/common.helper";
+
+export class IssueArchiveService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getArchivedIssues(workspaceSlug: string, projectId: string, queries?: any): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/`, {
+      params: queries,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async unarchiveIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/unarchive/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async retrieveArchivedIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteArchivedIssue(workspaceSlug: string, projectId: string, issuesId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/${issuesId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/issue/issue_attachment.service.ts b/web/services/issue/issue_attachment.service.ts
new file mode 100644
index 000000000..94c94ded1
--- /dev/null
+++ b/web/services/issue/issue_attachment.service.ts
@@ -0,0 +1,49 @@
+import { APIService } from "services/api.service";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+export class IssueAttachmentService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async uploadIssueAttachment(workspaceSlug: string, projectId: string, issueId: string, file: FormData): Promise<any> {
+    return this.post(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/`,
+      file,
+      {
+        headers: {
+          ...this.getHeaders(),
+          "Content-Type": "multipart/form-data",
+        },
+      }
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getIssueAttachment(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueAttachment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    assetId: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/${assetId}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/issue/issue_comment.service.ts b/web/services/issue/issue_comment.service.ts
new file mode 100644
index 000000000..12c08a517
--- /dev/null
+++ b/web/services/issue/issue_comment.service.ts
@@ -0,0 +1,86 @@
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import { IIssueComment, IUser } from "types";
+// helper
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class IssueCommentService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<IIssueComment>,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`, data)
+      .then((response) => {
+        trackEventService.trackIssueCommentEvent(response.data, "ISSUE_COMMENT_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    data: Partial<IIssueComment>,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`,
+      data
+    )
+      .then((response) => {
+        trackEventService.trackIssueCommentEvent(response.data, "ISSUE_COMMENT_UPDATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueComment(
+    workspaceSlug: string,
+    projectId: string,
+    issueId: string,
+    commentId: string,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`
+    )
+      .then((response) => {
+        trackEventService.trackIssueCommentEvent(
+          {
+            issueId,
+            commentId,
+          },
+          "ISSUE_COMMENT_DELETE",
+          user
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/issue/issue_draft.service.tsx b/web/services/issue/issue_draft.service.tsx
new file mode 100644
index 000000000..b329febfb
--- /dev/null
+++ b/web/services/issue/issue_draft.service.tsx
@@ -0,0 +1,51 @@
+import { APIService } from "services/api.service";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+export class IssueDraftService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getDraftIssues(workspaceSlug: string, projectId: string, params?: any): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/`, {
+      params,
+    })
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createDraftIssue(workspaceSlug: string, projectId: string, data: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateDraftIssue(workspaceSlug: string, projectId: string, issueId: string, data: any): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/${issueId}/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteDraftIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async getDraftIssueById(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/${issueId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
diff --git a/web/services/issue/issue_label.service.ts b/web/services/issue/issue_label.service.ts
new file mode 100644
index 000000000..00b945d01
--- /dev/null
+++ b/web/services/issue/issue_label.service.ts
@@ -0,0 +1,112 @@
+import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import { IIssueLabels, IUser } from "types";
+
+const trackEventServices = new TrackEventService();
+
+export class IssueLabelService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getWorkspaceIssueLabels(workspaceSlug: string): Promise<IIssueLabels[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/labels/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getProjectIssueLabels(workspaceSlug: string, projectId: string): Promise<IIssueLabels[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async createIssueLabel(
+    workspaceSlug: string,
+    projectId: string,
+    data: any,
+    user: IUser | undefined
+  ): Promise<IIssueLabels> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`, data)
+      .then((response: { data: IIssueLabels; [key: string]: any }) => {
+        trackEventServices.trackIssueLabelEvent(
+          {
+            workSpaceId: response?.data?.workspace_detail?.id,
+            workSpaceName: response?.data?.workspace_detail?.name,
+            workspaceSlug,
+            projectId,
+            projectIdentifier: response?.data?.project_detail?.identifier,
+            projectName: response?.data?.project_detail?.name,
+            labelId: response?.data?.id,
+            color: response?.data?.color,
+          },
+          "ISSUE_LABEL_CREATE",
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchIssueLabel(
+    workspaceSlug: string,
+    projectId: string,
+    labelId: string,
+    data: any,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`, data)
+      .then((response) => {
+        trackEventServices.trackIssueLabelEvent(
+          {
+            workSpaceId: response?.data?.workspace_detail?.id,
+            workSpaceName: response?.data?.workspace_detail?.name,
+            workspaceSlug,
+            projectId,
+            projectIdentifier: response?.data?.project_detail?.identifier,
+            projectName: response?.data?.project_detail?.name,
+            labelId: response?.data?.id,
+            color: response?.data?.color,
+          },
+          "ISSUE_LABEL_UPDATE",
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteIssueLabel(
+    workspaceSlug: string,
+    projectId: string,
+    labelId: string,
+    user: IUser | undefined
+  ): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`)
+      .then((response) => {
+        trackEventServices.trackIssueLabelEvent(
+          {
+            workspaceSlug,
+            projectId,
+          },
+          "ISSUE_LABEL_DELETE",
+          user as IUser
+        );
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/reaction.service.ts b/web/services/issue/issue_reaction.service.ts
similarity index 54%
rename from web/services/reaction.service.ts
rename to web/services/issue/issue_reaction.service.ts
index 606431857..737d9879f 100644
--- a/web/services/reaction.service.ts
+++ b/web/services/issue/issue_reaction.service.ts
@@ -1,17 +1,13 @@
 import { API_BASE_URL } from "helpers/common.helper";
 // services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import type {
-  ICurrentUserResponse,
-  IssueReaction,
-  IssueCommentReaction,
-  IssueReactionForm,
-  IssueCommentReactionForm,
-} from "types";
+import type { IUser, IssueReaction, IssueCommentReaction, IssueReactionForm, IssueCommentReactionForm } from "types";
 
-class ReactionService extends APIService {
+const trackEventService = new TrackEventService();
+
+export class IssueReactionService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -21,14 +17,11 @@ class ReactionService extends APIService {
     projectId: string,
     issueId: string,
     data: IssueReactionForm,
-    user?: ICurrentUserResponse
+    user?: IUser
   ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`,
-      data
-    )
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`, data)
       .then((response) => {
-        trackEventServices.trackReactionEvent(response?.data, "ISSUE_REACTION_CREATE", user);
+        trackEventService.trackReactionEvent(response?.data, "ISSUE_REACTION_CREATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -36,14 +29,8 @@ class ReactionService extends APIService {
       });
   }
 
-  async listIssueReactions(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<IssueReaction[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`
-    )
+  async listIssueReactions(workspaceSlug: string, projectId: string, issueId: string): Promise<IssueReaction[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -55,13 +42,13 @@ class ReactionService extends APIService {
     projectId: string,
     issueId: string,
     reaction: string,
-    user?: ICurrentUserResponse
+    user?: IUser
   ): Promise<any> {
     return this.delete(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/reactions/${reaction}/`
     )
       .then((response) => {
-        trackEventServices.trackReactionEvent(response?.data, "ISSUE_REACTION_DELETE", user);
+        trackEventService.trackReactionEvent(response?.data, "ISSUE_REACTION_DELETE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -74,18 +61,11 @@ class ReactionService extends APIService {
     projectId: string,
     commentId: string,
     data: IssueCommentReactionForm,
-    user?: ICurrentUserResponse
+    user?: IUser
   ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/`,
-      data
-    )
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/`, data)
       .then((response) => {
-        trackEventServices.trackReactionEvent(
-          response?.data,
-          "ISSUE_COMMENT_REACTION_CREATE",
-          user
-        );
+        trackEventService.trackReactionEvent(response?.data, "ISSUE_COMMENT_REACTION_CREATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -98,9 +78,7 @@ class ReactionService extends APIService {
     projectId: string,
     commentId: string
   ): Promise<IssueCommentReaction[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/`
-    )
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -112,17 +90,13 @@ class ReactionService extends APIService {
     projectId: string,
     commentId: string,
     reaction: string,
-    user?: ICurrentUserResponse
+    user?: IUser
   ): Promise<any> {
     return this.delete(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/comments/${commentId}/reactions/${reaction}/`
     )
       .then((response) => {
-        trackEventServices.trackReactionEvent(
-          response?.data,
-          "ISSUE_COMMENT_REACTION_DELETE",
-          user
-        );
+        trackEventService.trackReactionEvent(response?.data, "ISSUE_COMMENT_REACTION_DELETE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -130,7 +104,3 @@ class ReactionService extends APIService {
       });
   }
 }
-
-const reactionService = new ReactionService();
-
-export default reactionService;
diff --git a/web/services/issues.service.ts b/web/services/issues.service.ts
deleted file mode 100644
index 3755b27b1..000000000
--- a/web/services/issues.service.ts
+++ /dev/null
@@ -1,690 +0,0 @@
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-// type
-import type {
-  ICurrentUserResponse,
-  IIssue,
-  IIssueActivity,
-  IIssueComment,
-  IIssueLabels,
-  ISubIssueResponse,
-} from "types";
-import { API_BASE_URL } from "helpers/common.helper";
-
-class ProjectIssuesServices extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async createIssues(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, data)
-      .then((response) => {
-        trackEventServices.trackIssueEvent(response.data, "ISSUE_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssues(workspaceSlug: string, projectId: string): Promise<IIssue[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssuesWithParams(
-    workspaceSlug: string,
-    projectId: string,
-    queries?: any
-  ): Promise<IIssue[] | { [key: string]: IIssue[] }> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/`, {
-      params: queries,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async retrieve(workspaceSlug: string, projectId: string, issueId: string): Promise<IIssue> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssueActivities(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<IIssueActivity[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/history/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssueComments(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssueProperties(workspaceSlug: string, projectId: string): Promise<any> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async addIssueToCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    data: {
-      issues: string[];
-    },
-    user: ICurrentUserResponse | undefined
-  ) {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/`,
-      data
-    )
-      .then((response) => {
-        trackEventServices.trackIssueMovedToCycleOrModuleEvent(
-          {
-            workspaceSlug,
-            workspaceName: response?.data?.[0]?.issue_detail?.workspace_detail?.name,
-            projectId,
-            projectIdentifier: response?.data?.[0]?.issue_detail?.project_detail?.identifier,
-            projectName: response?.data?.[0]?.issue_detail?.project_detail?.name,
-            issueId: response?.data?.[0]?.issue_detail?.id,
-            cycleId,
-          },
-          response.data.length > 1 ? "ISSUE_MOVED_TO_CYCLE_IN_BULK" : "ISSUE_MOVED_TO_CYCLE",
-          user
-        );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async removeIssueFromCycle(
-    workspaceSlug: string,
-    projectId: string,
-    cycleId: string,
-    bridgeId: string
-  ) {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/cycle-issues/${bridgeId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createIssueRelation(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    user: ICurrentUserResponse,
-    data: {
-      related_list: Array<{
-        relation_type: "duplicate" | "relates_to" | "blocked_by";
-        related_issue: string;
-      }>;
-      relation?: "blocking" | null;
-    }
-  ) {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/`,
-      data
-    )
-      .then((response) => {
-        trackEventServices.trackIssueRelationEvent(response.data, "ISSUE_RELATION_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async deleteIssueRelation(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    relationId: string,
-    user: ICurrentUserResponse
-  ) {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-relation/${relationId}/`
-    )
-      .then((response) => {
-        trackEventServices.trackIssueRelationEvent(response.data, "ISSUE_RELATION_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async createIssueProperties(workspaceSlug: string, projectId: string, data: any): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchIssueProperties(
-    workspaceSlug: string,
-    projectId: string,
-    issuePropertyId: string,
-    data: any
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-properties/` +
-        `${issuePropertyId}/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createIssueComment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: Partial<IIssueComment>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/`,
-      data
-    )
-      .then((response) => {
-        trackEventServices.trackIssueCommentEvent(response.data, "ISSUE_COMMENT_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchIssueComment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    commentId: string,
-    data: Partial<IIssueComment>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`,
-      data
-    )
-      .then((response) => {
-        trackEventServices.trackIssueCommentEvent(response.data, "ISSUE_COMMENT_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteIssueComment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    commentId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/comments/${commentId}/`
-    )
-      .then((response) => {
-        trackEventServices.trackIssueCommentEvent(
-          {
-            issueId,
-            commentId,
-          },
-          "ISSUE_COMMENT_DELETE",
-          user
-        );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getWorkspaceLabels(workspaceSlug: string): Promise<IIssueLabels[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/labels/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssueLabels(workspaceSlug: string, projectId: string): Promise<IIssueLabels[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createIssueLabel(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IIssueLabels> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/`, data)
-      .then((response: { data: IIssueLabels; [key: string]: any }) => {
-        trackEventServices.trackIssueLabelEvent(
-          {
-            workSpaceId: response?.data?.workspace_detail?.id,
-            workSpaceName: response?.data?.workspace_detail?.name,
-            workspaceSlug,
-            projectId,
-            projectIdentifier: response?.data?.project_detail?.identifier,
-            projectName: response?.data?.project_detail?.name,
-            labelId: response?.data?.id,
-            color: response?.data?.color,
-          },
-          "ISSUE_LABEL_CREATE",
-          user
-        );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchIssueLabel(
-    workspaceSlug: string,
-    projectId: string,
-    labelId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`,
-      data
-    )
-      .then((response) => {
-        trackEventServices.trackIssueLabelEvent(
-          {
-            workSpaceId: response?.data?.workspace_detail?.id,
-            workSpaceName: response?.data?.workspace_detail?.name,
-            workspaceSlug,
-            projectId,
-            projectIdentifier: response?.data?.project_detail?.identifier,
-            projectName: response?.data?.project_detail?.name,
-            labelId: response?.data?.id,
-            color: response?.data?.color,
-          },
-          "ISSUE_LABEL_UPDATE",
-          user
-        );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteIssueLabel(
-    workspaceSlug: string,
-    projectId: string,
-    labelId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-labels/${labelId}/`
-    )
-      .then((response) => {
-        trackEventServices.trackIssueLabelEvent(
-          {
-            workspaceSlug,
-            projectId,
-          },
-          "ISSUE_LABEL_DELETE",
-          user
-        );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchIssue(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: Partial<IIssue>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`,
-      data
-    )
-      .then((response) => {
-        trackEventServices.trackIssueEvent(response.data, "ISSUE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteIssue(
-    workspaceSlug: string,
-    projectId: string,
-    issuesId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issuesId}/`)
-      .then((response) => {
-        trackEventServices.trackIssueEvent({ issuesId }, "ISSUE_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async bulkDeleteIssues(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-delete-issues/`,
-      data
-    )
-      .then((response) => {
-        trackEventServices.trackIssueBulkDeleteEvent(data, user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async subIssues(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<ISubIssueResponse> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async addSubIssues(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: { sub_issue_ids: string[] }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/sub-issues/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async createIssueLink(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: {
-      metadata: any;
-      title: string;
-      url: string;
-    }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async updateIssueLink(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    linkId: string,
-    data: {
-      metadata: any;
-      title: string;
-      url: string;
-    }
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async deleteIssueLink(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    linkId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-links/${linkId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async uploadIssueAttachment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    file: FormData
-  ): Promise<any> {
-    return this.mediaUpload(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/`,
-      file
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getIssueAttachment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteIssueAttachment(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    assetId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/issue-attachments/${assetId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getArchivedIssues(workspaceSlug: string, projectId: string, queries?: any): Promise<any> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/`, {
-      params: queries,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async unarchiveIssue(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/unarchive/${issueId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async retrieveArchivedIssue(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/${issueId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteArchivedIssue(
-    workspaceSlug: string,
-    projectId: string,
-    issuesId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/archived-issues/${issuesId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getDraftIssues(workspaceSlug: string, projectId: string, params?: any): Promise<any> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/`, {
-      params,
-    })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async createDraftIssue(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/`, data)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async updateDraftIssue(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: any,
-    user: ICurrentUserResponse
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/${issueId}/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async deleteDraftIssue(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    user: ICurrentUserResponse
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/${issueId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async getDraftIssueById(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issue-drafts/${issueId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
-
-const projectIssuesServices = new ProjectIssuesServices();
-
-export default projectIssuesServices;
diff --git a/web/services/modules.service.ts b/web/services/module.service.ts
similarity index 62%
rename from web/services/modules.service.ts
rename to web/services/module.service.ts
index c33ffaeef..60763122e 100644
--- a/web/services/modules.service.ts
+++ b/web/services/module.service.ts
@@ -1,11 +1,13 @@
 // services
-import APIService from "services/api.service";
-import trackEventServices from "./track-event.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import type { IModule, IIssue, ICurrentUserResponse } from "types";
+import type { IModule, IIssue, IUser } from "types";
 import { API_BASE_URL } from "helpers/common.helper";
 
-class ProjectIssuesServices extends APIService {
+const trackEventService = new TrackEventService();
+
+export class ModuleService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -18,15 +20,10 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async createModule(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async createModule(workspaceSlug: string, projectId: string, data: any, user: any): Promise<IModule> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/`, data)
       .then((response) => {
-        trackEventServices.trackModuleEvent(response?.data, "MODULE_CREATE", user);
+        trackEventService.trackModuleEvent(response?.data, "MODULE_CREATE", user);
         return response?.data;
       })
       .catch((error) => {
@@ -39,14 +36,11 @@ class ProjectIssuesServices extends APIService {
     projectId: string,
     moduleId: string,
     data: any,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
-    return this.put(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`,
-      data
-    )
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`, data)
       .then((response) => {
-        trackEventServices.trackModuleEvent(response?.data, "MODULE_UPDATE", user);
+        trackEventService.trackModuleEvent(response?.data, "MODULE_UPDATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -54,11 +48,7 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async getModuleDetails(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string
-  ): Promise<IModule> {
+  async getModuleDetails(workspaceSlug: string, projectId: string, moduleId: string): Promise<IModule> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -71,14 +61,11 @@ class ProjectIssuesServices extends APIService {
     projectId: string,
     moduleId: string,
     data: Partial<IModule>,
-    user: ICurrentUserResponse | undefined
+    user: any
   ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`,
-      data
-    )
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`, data)
       .then((response) => {
-        trackEventServices.trackModuleEvent(response?.data, "MODULE_UPDATE", user);
+        trackEventService.trackModuleEvent(response?.data, "MODULE_UPDATE", user);
         return response?.data;
       })
       .catch((error) => {
@@ -86,17 +73,10 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async deleteModule(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`
-    )
+  async deleteModule(workspaceSlug: string, projectId: string, moduleId: string, user: any): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/`)
       .then((response) => {
-        trackEventServices.trackModuleEvent(response?.data, "MODULE_DELETE", user);
+        trackEventService.trackModuleEvent(response?.data, "MODULE_DELETE", user);
         return response?.data;
       })
       .catch((error) => {
@@ -104,14 +84,8 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async getModuleIssues(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string
-  ): Promise<IIssue[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`
-    )
+  async getModuleIssues(workspaceSlug: string, projectId: string, moduleId: string): Promise<IIssue[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -129,10 +103,9 @@ class ProjectIssuesServices extends APIService {
         [key: string]: IIssue[];
       }
   > {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`,
-      { params: queries }
-    )
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`, {
+      params: queries,
+    })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -144,14 +117,11 @@ class ProjectIssuesServices extends APIService {
     projectId: string,
     moduleId: string,
     data: { issues: string[] },
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`,
-      data
-    )
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-issues/`, data)
       .then((response) => {
-        trackEventServices.trackIssueMovedToCycleOrModuleEvent(
+        trackEventService.trackIssueMovedToCycleOrModuleEvent(
           {
             workspaceSlug,
             workspaceName: response?.data?.[0]?.issue_detail?.workspace_detail?.name,
@@ -162,7 +132,7 @@ class ProjectIssuesServices extends APIService {
             moduleId,
           },
           response?.data?.length > 1 ? "ISSUE_MOVED_TO_MODULE_IN_BULK" : "ISSUE_MOVED_TO_MODULE",
-          user
+          user as IUser
         );
         return response?.data;
       })
@@ -196,10 +166,7 @@ class ProjectIssuesServices extends APIService {
       url: string;
     }
   ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/`,
-      data
-    )
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response;
@@ -227,12 +194,7 @@ class ProjectIssuesServices extends APIService {
       });
   }
 
-  async deleteModuleLink(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string,
-    linkId: string
-  ): Promise<any> {
+  async deleteModuleLink(workspaceSlug: string, projectId: string, moduleId: string, linkId: string): Promise<any> {
     return this.delete(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/modules/${moduleId}/module-links/${linkId}/`
     )
@@ -249,29 +211,18 @@ class ProjectIssuesServices extends APIService {
       module: string;
     }
   ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/`,
-      data
-    )
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 
-  async removeModuleFromFavorites(
-    workspaceSlug: string,
-    projectId: string,
-    moduleId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/${moduleId}/`
-    )
+  async removeModuleFromFavorites(workspaceSlug: string, projectId: string, moduleId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-modules/${moduleId}/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 }
-
-export default new ProjectIssuesServices();
diff --git a/web/services/notifications.service.ts b/web/services/notification.service.ts
similarity index 59%
rename from web/services/notifications.service.ts
rename to web/services/notification.service.ts
index 8ff64e915..fe8a24b6c 100644
--- a/web/services/notifications.service.ts
+++ b/web/services/notification.service.ts
@@ -1,5 +1,5 @@
 // services
-import APIService from "services/api.service";
+import { APIService } from "services/api.service";
 // types
 import type {
   IUserNotification,
@@ -11,15 +11,12 @@ import type {
 // helpers
 import { API_BASE_URL } from "helpers/common.helper";
 
-class UserNotificationsServices extends APIService {
+export class NotificationService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
 
-  async getUserNotifications(
-    workspaceSlug: string,
-    params: INotificationParams
-  ): Promise<IUserNotification[]> {
+  async getUserNotifications(workspaceSlug: string, params: INotificationParams): Promise<IUserNotification[]> {
     return this.get(`/api/workspaces/${workspaceSlug}/users/notifications`, {
       params,
     })
@@ -29,10 +26,7 @@ class UserNotificationsServices extends APIService {
       });
   }
 
-  async getUserNotificationDetailById(
-    workspaceSlug: string,
-    notificationId: string
-  ): Promise<IUserNotification> {
+  async getUserNotificationDetailById(workspaceSlug: string, notificationId: string): Promise<IUserNotification> {
     return this.get(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -40,10 +34,7 @@ class UserNotificationsServices extends APIService {
       });
   }
 
-  async markUserNotificationAsRead(
-    workspaceSlug: string,
-    notificationId: string
-  ): Promise<IUserNotification> {
+  async markUserNotificationAsRead(workspaceSlug: string, notificationId: string): Promise<IUserNotification> {
     return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/read/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -51,39 +42,24 @@ class UserNotificationsServices extends APIService {
       });
   }
 
-  async markUserNotificationAsUnread(
-    workspaceSlug: string,
-    notificationId: string
-  ): Promise<IUserNotification> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/read/`
-    )
+  async markUserNotificationAsUnread(workspaceSlug: string, notificationId: string): Promise<IUserNotification> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/read/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 
-  async markUserNotificationAsArchived(
-    workspaceSlug: string,
-    notificationId: string
-  ): Promise<IUserNotification> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`
-    )
+  async markUserNotificationAsArchived(workspaceSlug: string, notificationId: string): Promise<IUserNotification> {
+    return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 
-  async markUserNotificationAsUnarchived(
-    workspaceSlug: string,
-    notificationId: string
-  ): Promise<IUserNotification> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`
-    )
+  async markUserNotificationAsUnarchived(workspaceSlug: string, notificationId: string): Promise<IUserNotification> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/archive/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -95,10 +71,7 @@ class UserNotificationsServices extends APIService {
     notificationId: string,
     data: Partial<IUserNotification>
   ): Promise<IUserNotification> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/`,
-      data
-    )
+    return this.patch(`/api/workspaces/${workspaceSlug}/users/notifications/${notificationId}/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -113,14 +86,8 @@ class UserNotificationsServices extends APIService {
       });
   }
 
-  async subscribeToIssueNotifications(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`
-    )
+  async subscribeToIssueNotifications(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -134,23 +101,15 @@ class UserNotificationsServices extends APIService {
   ): Promise<{
     subscribed: boolean;
   }> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`
-    )
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 
-  async unsubscribeFromIssueNotifications(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`
-    )
+  async unsubscribeFromIssueNotifications(workspaceSlug: string, projectId: string, issueId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/subscribe/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -173,10 +132,7 @@ class UserNotificationsServices extends APIService {
       });
   }
 
-  async markAllNotificationsAsRead(
-    workspaceSlug: string,
-    payload: IMarkAllAsReadPayload
-  ): Promise<any> {
+  async markAllNotificationsAsRead(workspaceSlug: string, payload: IMarkAllAsReadPayload): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/users/notifications/mark-all-read/`, {
       ...payload,
     })
@@ -186,7 +142,3 @@ class UserNotificationsServices extends APIService {
       });
   }
 }
-
-const userNotificationServices = new UserNotificationsServices();
-
-export default userNotificationServices;
diff --git a/web/services/pages.service.ts b/web/services/page.service.ts
similarity index 69%
rename from web/services/pages.service.ts
rename to web/services/page.service.ts
index 9e07dc6a2..a344c69ec 100644
--- a/web/services/pages.service.ts
+++ b/web/services/page.service.ts
@@ -1,11 +1,13 @@
 import { API_BASE_URL } from "helpers/common.helper";
 // services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import { IPage, IPageBlock, RecentPagesResponse, IIssue, ICurrentUserResponse } from "types";
+import { IPage, IPageBlock, RecentPagesResponse, IIssue, IUser } from "types";
 
-class PageServices extends APIService {
+const trackEventService = new TrackEventService();
+
+export class PageService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -14,11 +16,11 @@ class PageServices extends APIService {
     workspaceSlug: string,
     projectId: string,
     data: Partial<IPage>,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<IPage> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/`, data)
       .then((response) => {
-        trackEventServices.trackPageEvent(response?.data, "PAGE_CREATE", user);
+        trackEventService.trackPageEvent(response?.data, "PAGE_CREATE", user);
         return response?.data;
       })
       .catch((error) => {
@@ -31,14 +33,11 @@ class PageServices extends APIService {
     projectId: string,
     pageId: string,
     data: Partial<IPage>,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<IPage> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`,
-      data
-    )
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`, data)
       .then((response) => {
-        trackEventServices.trackPageEvent(response?.data, "PAGE_UPDATE", user);
+        trackEventService.trackPageEvent(response?.data, "PAGE_UPDATE", user);
         return response?.data;
       })
       .catch((error) => {
@@ -46,15 +45,10 @@ class PageServices extends APIService {
       });
   }
 
-  async deletePage(
-    workspaceSlug: string,
-    projectId: string,
-    pageId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async deletePage(workspaceSlug: string, projectId: string, pageId: string, user: IUser | undefined): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/`)
       .then((response) => {
-        trackEventServices.trackPageEvent(response?.data, "PAGE_DELETE", user);
+        trackEventService.trackPageEvent(response?.data, "PAGE_DELETE", user);
         return response?.data;
       })
       .catch((error) => {
@@ -69,10 +63,7 @@ class PageServices extends APIService {
       page: string;
     }
   ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/`,
-      data
-    )
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -80,9 +71,7 @@ class PageServices extends APIService {
   }
 
   async removePageFromFavorites(workspaceSlug: string, projectId: string, pageId: string) {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/${pageId}`
-    )
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-pages/${pageId}`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -130,14 +119,11 @@ class PageServices extends APIService {
     projectId: string,
     pageId: string,
     data: Partial<IPageBlock>,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<IPageBlock> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`,
-      data
-    )
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`, data)
       .then((response) => {
-        trackEventServices.trackPageBlockEvent(response?.data, "PAGE_BLOCK_CREATE", user);
+        trackEventService.trackPageBlockEvent(response?.data, "PAGE_BLOCK_CREATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -166,14 +152,14 @@ class PageServices extends APIService {
     pageId: string,
     pageBlockId: string,
     data: Partial<IPageBlock>,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<IPage> {
     return this.patch(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`,
       data
     )
       .then((response) => {
-        trackEventServices.trackPageBlockEvent(response?.data, "PAGE_BLOCK_UPDATE", user);
+        trackEventService.trackPageBlockEvent(response?.data, "PAGE_BLOCK_UPDATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -186,13 +172,13 @@ class PageServices extends APIService {
     projectId: string,
     pageId: string,
     pageBlockId: string,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
     return this.delete(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${pageBlockId}/`
     )
       .then((response) => {
-        trackEventServices.trackPageBlockEvent(response?.data, "PAGE_BLOCK_DELETE", user);
+        trackEventService.trackPageBlockEvent(response?.data, "PAGE_BLOCK_DELETE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -200,14 +186,8 @@ class PageServices extends APIService {
       });
   }
 
-  async listPageBlocks(
-    workspaceSlug: string,
-    projectId: string,
-    pageId: string
-  ): Promise<IPageBlock[]> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`
-    )
+  async listPageBlocks(workspaceSlug: string, projectId: string, pageId: string): Promise<IPageBlock[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -219,17 +199,13 @@ class PageServices extends APIService {
     projectId: string,
     pageId: string,
     blockId: string,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<IIssue> {
     return this.post(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/page-blocks/${blockId}/issues/`
     )
       .then((response) => {
-        trackEventServices.trackPageBlockEvent(
-          response?.data,
-          "PAGE_BLOCK_CONVERTED_TO_ISSUE",
-          user
-        );
+        trackEventService.trackPageBlockEvent(response?.data, "PAGE_BLOCK_CONVERTED_TO_ISSUE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -237,5 +213,3 @@ class PageServices extends APIService {
       });
   }
 }
-
-export default new PageServices();
diff --git a/web/services/project-publish.service.ts b/web/services/project-publish.service.ts
deleted file mode 100644
index 30a354847..000000000
--- a/web/services/project-publish.service.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { API_BASE_URL } from "helpers/common.helper";
-// services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-// types
-import { ICurrentUserResponse } from "types";
-import { IProjectPublishSettings } from "store/project-publish";
-
-class ProjectServices extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async getProjectSettingsAsync(
-    workspace_slug: string,
-    project_slug: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/`
-    )
-      .then((response) => {
-        // trackEventServices.trackProjectPublishSettingsEvent(
-        //   response.data,
-        //   "GET_PROJECT_PUBLISH_SETTINGS",
-        //   user
-        // );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async createProjectSettingsAsync(
-    workspace_slug: string,
-    project_slug: string,
-    data: IProjectPublishSettings,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/`,
-      data
-    )
-      .then((response) => {
-        //   trackEventServices.trackProjectPublishSettingsEvent(
-        //     response.data,
-        //     "CREATE_PROJECT_PUBLISH_SETTINGS",
-        //     user
-        //   );
-
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async updateProjectSettingsAsync(
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    data: IProjectPublishSettings,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/${project_publish_id}/`,
-      data
-    )
-      .then((response) => {
-        //   trackEventServices.trackProjectPublishSettingsEvent(
-        //     response.data,
-        //     "UPDATE_PROJECT_PUBLISH_SETTINGS",
-        //     user
-        //   );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-
-  async deleteProjectSettingsAsync(
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/${project_publish_id}/`
-    )
-      .then((response) => {
-        //   trackEventServices.trackProjectPublishSettingsEvent(
-        //     response.data,
-        //     "DELETE_PROJECT_PUBLISH_SETTINGS",
-        //     user
-        //   );
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
-
-export default ProjectServices;
diff --git a/web/services/project/index.ts b/web/services/project/index.ts
new file mode 100644
index 000000000..538b65e11
--- /dev/null
+++ b/web/services/project/index.ts
@@ -0,0 +1,6 @@
+export * from "./project.service";
+export * from "./project_estimate.service";
+export * from "./project_publish.service";
+export * from "./project_state.service";
+export * from "./project_export.service";
+export * from "./project_invitation.service";
diff --git a/web/services/project.service.ts b/web/services/project/project.service.ts
similarity index 66%
rename from web/services/project.service.ts
rename to web/services/project/project.service.ts
index 8f2508b74..07dabbe17 100644
--- a/web/services/project.service.ts
+++ b/web/services/project/project.service.ts
@@ -1,34 +1,31 @@
 import { API_BASE_URL } from "helpers/common.helper";
 // services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
 // types
 import type {
   GithubRepositoriesResponse,
-  ICurrentUserResponse,
+  IUser,
   IProject,
   IProjectBulkInviteFormData,
   IProjectMember,
-  IProjectMemberInvitation,
   ISearchIssueResponse,
   ProjectPreferences,
   IProjectViewProps,
   TProjectIssuesSearchParams,
 } from "types";
 
-export class ProjectServices extends APIService {
+const trackEventService = new TrackEventService();
+
+export class ProjectService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
 
-  async createProject(
-    workspaceSlug: string,
-    data: Partial<IProject>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IProject> {
+  async createProject(workspaceSlug: string, data: Partial<IProject>, user: any): Promise<IProject> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/`, data)
       .then((response) => {
-        trackEventServices.trackProjectEvent(response.data, "CREATE_PROJECT", user);
+        trackEventService.trackProjectEvent(response.data, "CREATE_PROJECT", user);
         return response?.data;
       })
       .catch((error) => {
@@ -48,15 +45,8 @@ export class ProjectServices extends APIService {
       });
   }
 
-  async getProjects(
-    workspaceSlug: string,
-    params: {
-      is_favorite: "all" | boolean;
-    }
-  ): Promise<IProject[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/`, {
-      params,
-    })
+  async getProjects(workspaceSlug: string): Promise<IProject[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -71,15 +61,10 @@ export class ProjectServices extends APIService {
       });
   }
 
-  async updateProject(
-    workspaceSlug: string,
-    projectId: string,
-    data: Partial<IProject>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IProject> {
+  async updateProject(workspaceSlug: string, projectId: string, data: Partial<IProject>, user: any): Promise<IProject> {
     return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`, data)
       .then((response) => {
-        trackEventServices.trackProjectEvent(response.data, "UPDATE_PROJECT", user);
+        trackEventService.trackProjectEvent(response.data, "UPDATE_PROJECT", user);
         return response?.data;
       })
       .catch((error) => {
@@ -87,14 +72,10 @@ export class ProjectServices extends APIService {
       });
   }
 
-  async deleteProject(
-    workspaceSlug: string,
-    projectId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async deleteProject(workspaceSlug: string, projectId: string, user: any | undefined): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/`)
       .then((response) => {
-        trackEventServices.trackProjectEvent({ projectId }, "DELETE_PROJECT", user);
+        trackEventService.trackProjectEvent({ projectId }, "DELETE_PROJECT", user);
         return response?.data;
       })
       .catch((error) => {
@@ -106,11 +87,11 @@ export class ProjectServices extends APIService {
     workspaceSlug: string,
     projectId: string,
     data: IProjectBulkInviteFormData,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/add/`, data)
       .then((response) => {
-        trackEventServices.trackProjectEvent(
+        trackEventService.trackProjectEvent(
           {
             workspaceId: response?.data?.workspace?.id,
             workspaceSlug,
@@ -119,7 +100,7 @@ export class ProjectServices extends APIService {
             memberEmail: response?.data?.member?.email,
           },
           "PROJECT_MEMBER_INVITE",
-          user
+          user as IUser
         );
         return response?.data;
       })
@@ -128,22 +109,18 @@ export class ProjectServices extends APIService {
       });
   }
 
-  async joinProject(workspaceSlug: string, data: any): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/join/`, data)
+  async joinProject(workspaceSlug: string, project_ids: string[]): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/join/`, { project_ids })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 
-  async leaveProject(
-    workspaceSlug: string,
-    projectId: string,
-    user: ICurrentUserResponse
-  ): Promise<any> {
+  async leaveProject(workspaceSlug: string, projectId: string, user: any): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/leave/`)
       .then((response) => {
-        trackEventServices.trackProjectEvent(
+        trackEventService.trackProjectEvent(
           "PROJECT_MEMBER_LEAVE",
           {
             workspaceSlug,
@@ -175,10 +152,7 @@ export class ProjectServices extends APIService {
       });
   }
 
-  async projectMembersWithEmail(
-    workspaceSlug: string,
-    projectId: string
-  ): Promise<IProjectMember[]> {
+  async projectMembersWithEmail(workspaceSlug: string, projectId: string): Promise<IProjectMember[]> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -194,11 +168,7 @@ export class ProjectServices extends APIService {
       });
   }
 
-  async getProjectMember(
-    workspaceSlug: string,
-    projectId: string,
-    memberId: string
-  ): Promise<IProjectMember> {
+  async getProjectMember(workspaceSlug: string, projectId: string, memberId: string): Promise<IProjectMember> {
     return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -212,74 +182,15 @@ export class ProjectServices extends APIService {
     memberId: string,
     data: Partial<IProjectMember>
   ): Promise<IProjectMember> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`,
-      data
-    )
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`, data)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
       });
   }
 
-  async deleteProjectMember(
-    workspaceSlug: string,
-    projectId: string,
-    memberId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectInvitations(
-    workspaceSlug: string,
-    projectId: string
-  ): Promise<IProjectMemberInvitation[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async projectInvitationsWithEmail(
-    workspaceSlug: string,
-    projectId: string
-  ): Promise<IProjectMemberInvitation[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateProjectInvitation(
-    workspaceSlug: string,
-    projectId: string,
-    invitationId: string
-  ): Promise<any> {
-    return this.put(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/${invitationId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteProjectInvitation(
-    workspaceSlug: string,
-    projectId: string,
-    invitationId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/${invitationId}/`
-    )
+  async deleteProjectMember(workspaceSlug: string, projectId: string, memberId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/members/${memberId}/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -304,7 +215,7 @@ export class ProjectServices extends APIService {
   }
 
   async getGithubRepositories(url: string): Promise<GithubRepositoriesResponse> {
-    return this.getWithoutBase(url)
+    return this.request(url)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -332,11 +243,7 @@ export class ProjectServices extends APIService {
       });
   }
 
-  async getProjectGithubRepository(
-    workspaceSlug: string,
-    projectId: string,
-    integrationId: string
-  ): Promise<any> {
+  async getProjectGithubRepository(workspaceSlug: string, projectId: string, integrationId: string): Promise<any> {
     return this.get(
       `/api/workspaces/${workspaceSlug}/projects/${projectId}/workspace-integrations/${integrationId}/github-repository-sync/`
     )
@@ -346,13 +253,16 @@ export class ProjectServices extends APIService {
       });
   }
 
-  async addProjectToFavorites(
-    workspaceSlug: string,
-    data: {
-      project: string;
-    }
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`, data)
+  async getUserProjectFavorites(workspaceSlug: string): Promise<any[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addProjectToFavorites(workspaceSlug: string, project: string): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/user-favorite-projects/`, { project })
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -381,5 +291,3 @@ export class ProjectServices extends APIService {
       });
   }
 }
-
-export default new ProjectServices();
diff --git a/web/services/estimates.service.ts b/web/services/project/project_estimate.service.ts
similarity index 55%
rename from web/services/estimates.service.ts
rename to web/services/project/project_estimate.service.ts
index 41494d09c..322d986fa 100644
--- a/web/services/estimates.service.ts
+++ b/web/services/project/project_estimate.service.ts
@@ -1,11 +1,14 @@
 // services
-import APIService from "services/api.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
 // types
-import type { ICurrentUserResponse, IEstimate, IEstimateFormData } from "types";
-import trackEventServices from "services/track-event.service";
+import type { IUser, IEstimate, IEstimateFormData } from "types";
+// helpers
 import { API_BASE_URL } from "helpers/common.helper";
 
-class ProjectEstimateServices extends APIService {
+const trackEventService = new TrackEventService();
+
+export class ProjectEstimateService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -14,11 +17,11 @@ class ProjectEstimateServices extends APIService {
     workspaceSlug: string,
     projectId: string,
     data: IEstimateFormData,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/`, data)
       .then((response) => {
-        trackEventServices.trackIssueEstimateEvent(response?.data, "ESTIMATE_CREATE", user);
+        trackEventService.trackIssueEstimateEvent(response?.data, "ESTIMATE_CREATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -31,14 +34,11 @@ class ProjectEstimateServices extends APIService {
     projectId: string,
     estimateId: string,
     data: IEstimateFormData,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`,
-      data
-    )
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`, data)
       .then((response) => {
-        trackEventServices.trackIssueEstimateEvent(response?.data, "ESTIMATE_UPDATE", user);
+        trackEventService.trackIssueEstimateEvent(response?.data, "ESTIMATE_UPDATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -46,14 +46,8 @@ class ProjectEstimateServices extends APIService {
       });
   }
 
-  async getEstimateDetails(
-    workspaceSlug: string,
-    projectId: string,
-    estimateId: string
-  ): Promise<IEstimate> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`
-    )
+  async getEstimateDetails(workspaceSlug: string, projectId: string, estimateId: string): Promise<IEstimate> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`)
       .then((response) => response?.data)
       .catch((error) => {
         throw error?.response?.data;
@@ -72,13 +66,11 @@ class ProjectEstimateServices extends APIService {
     workspaceSlug: string,
     projectId: string,
     estimateId: string,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`
-    )
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/estimates/${estimateId}/`)
       .then((response) => {
-        trackEventServices.trackIssueEstimateEvent(response?.data, "ESTIMATE_DELETE", user);
+        trackEventService.trackIssueEstimateEvent(response?.data, "ESTIMATE_DELETE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -86,5 +78,3 @@ class ProjectEstimateServices extends APIService {
       });
   }
 }
-
-export default new ProjectEstimateServices();
diff --git a/web/services/integration/csv.services.ts b/web/services/project/project_export.service.ts
similarity index 60%
rename from web/services/integration/csv.services.ts
rename to web/services/project/project_export.service.ts
index b6b7428b0..64e42925c 100644
--- a/web/services/integration/csv.services.ts
+++ b/web/services/project/project_export.service.ts
@@ -1,24 +1,28 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-import { ICurrentUserResponse } from "types";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import { IUser } from "types";
+// helpers
 import { API_BASE_URL } from "helpers/common.helper";
 
-class CSVIntegrationService extends APIService {
+const trackEventService = new TrackEventService();
+
+export class ProjectExportService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
 
-  async exportCSVService(
+  async csvExport(
     workspaceSlug: string,
     data: {
       provider: string;
       project: string[];
     },
-    user: ICurrentUserResponse
+    user: IUser
   ): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/export-issues/`, data)
       .then((response) => {
-        trackEventServices.trackExporterEvent(
+        trackEventService.trackExporterEvent(
           {
             workspaceSlug,
           },
@@ -32,5 +36,3 @@ class CSVIntegrationService extends APIService {
       });
   }
 }
-
-export default new CSVIntegrationService();
diff --git a/web/services/project/project_invitation.service.ts b/web/services/project/project_invitation.service.ts
new file mode 100644
index 000000000..54686dd6a
--- /dev/null
+++ b/web/services/project/project_invitation.service.ts
@@ -0,0 +1,43 @@
+import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
+// types
+import { IProjectMemberInvitation } from "types";
+
+export class ProjectInvitationService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async projectInvitations(workspaceSlug: string, projectId: string): Promise<IProjectMemberInvitation[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async projectInvitationsWithEmail(workspaceSlug: string, projectId: string): Promise<IProjectMemberInvitation[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async updateProjectInvitation(workspaceSlug: string, projectId: string, invitationId: string): Promise<any> {
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/${invitationId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteProjectInvitation(workspaceSlug: string, projectId: string, invitationId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/invitations/${invitationId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/project/project_publish.service.ts b/web/services/project/project_publish.service.ts
new file mode 100644
index 000000000..16d705b45
--- /dev/null
+++ b/web/services/project/project_publish.service.ts
@@ -0,0 +1,61 @@
+import { API_BASE_URL } from "helpers/common.helper";
+// services
+import { APIService } from "services/api.service";
+// types
+import { IProjectPublishSettings } from "store/project";
+
+export class ProjectPublishService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async getProjectSettingsAsync(workspace_slug: string, project_slug: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async createProjectSettingsAsync(
+    workspace_slug: string,
+    project_slug: string,
+    data: IProjectPublishSettings
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async updateProjectSettingsAsync(
+    workspace_slug: string,
+    project_slug: string,
+    project_publish_id: string,
+    data: IProjectPublishSettings
+  ): Promise<any> {
+    return this.patch(
+      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/${project_publish_id}/`,
+      data
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
+  async deleteProjectSettingsAsync(
+    workspace_slug: string,
+    project_slug: string,
+    project_publish_id: string
+  ): Promise<any> {
+    return this.delete(
+      `/api/workspaces/${workspace_slug}/projects/${project_slug}/project-deploy-boards/${project_publish_id}/`
+    )
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+}
diff --git a/web/services/state.service.ts b/web/services/project/project_state.service.ts
similarity index 62%
rename from web/services/state.service.ts
rename to web/services/project/project_state.service.ts
index aa784855e..018df3a20 100644
--- a/web/services/state.service.ts
+++ b/web/services/project/project_state.service.ts
@@ -1,25 +1,22 @@
 // services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
 // helpers
 import { API_BASE_URL } from "helpers/common.helper";
 // types
-import type { ICurrentUserResponse, IState, IStateResponse } from "types";
+import type { IUser, IState, IStateResponse } from "types";
 
-class ProjectStateServices extends APIService {
+const trackEventService = new TrackEventService();
+
+export class ProjectStateService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
 
-  async createState(
-    workspaceSlug: string,
-    projectId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async createState(workspaceSlug: string, projectId: string, data: any, user: IUser | undefined): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/`, data)
       .then((response) => {
-        trackEventServices.trackStateEvent(response?.data, "STATE_CREATE", user);
+        trackEventService.trackStateEvent(response?.data, "STATE_CREATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -57,14 +54,11 @@ class ProjectStateServices extends APIService {
     projectId: string,
     stateId: string,
     data: IState,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
-    return this.put(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`,
-      data
-    )
+    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`, data)
       .then((response) => {
-        trackEventServices.trackStateEvent(response?.data, "STATE_UPDATE", user);
+        trackEventService.trackStateEvent(response?.data, "STATE_UPDATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -77,14 +71,11 @@ class ProjectStateServices extends APIService {
     projectId: string,
     stateId: string,
     data: Partial<IState>,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`,
-      data
-    )
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`, data)
       .then((response) => {
-        trackEventServices.trackStateEvent(response?.data, "STATE_UPDATE", user);
+        trackEventService.trackStateEvent(response?.data, "STATE_UPDATE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -92,15 +83,10 @@ class ProjectStateServices extends APIService {
       });
   }
 
-  async deleteState(
-    workspaceSlug: string,
-    projectId: string,
-    stateId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async deleteState(workspaceSlug: string, projectId: string, stateId: string, user: IUser | undefined): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/states/${stateId}/`)
       .then((response) => {
-        trackEventServices.trackStateEvent(response?.data, "STATE_DELETE", user);
+        trackEventService.trackStateEvent(response?.data, "STATE_DELETE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -108,5 +94,3 @@ class ProjectStateServices extends APIService {
       });
   }
 }
-
-export default new ProjectStateServices();
diff --git a/web/services/track-event.service.ts b/web/services/track_event.service.ts
similarity index 81%
rename from web/services/track-event.service.ts
rename to web/services/track_event.service.ts
index ac0adaf17..32ef9a542 100644
--- a/web/services/track-event.service.ts
+++ b/web/services/track_event.service.ts
@@ -1,12 +1,11 @@
 // services
-import APIService from "services/api.service";
+import { APIService } from "services/api.service";
 
-const trackEvent =
-  process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
+const trackEvent = process.env.NEXT_PUBLIC_TRACK_EVENTS === "true" || process.env.NEXT_PUBLIC_TRACK_EVENTS === "1";
 
 // types
 import type {
-  ICurrentUserResponse,
+  IUser,
   ICycle,
   IEstimate,
   IGptResponse,
@@ -17,7 +16,7 @@ import type {
   IPageBlock,
   IProject,
   IState,
-  IView,
+  IProjectView,
   IWorkspace,
   IssueCommentReaction,
   IssueReaction,
@@ -50,18 +49,9 @@ type PagesEventType = "PAGE_CREATE" | "PAGE_UPDATE" | "PAGE_DELETE";
 
 type ViewEventType = "VIEW_CREATE" | "VIEW_UPDATE" | "VIEW_DELETE";
 
-type IssueCommentEventType =
-  | "ISSUE_COMMENT_CREATE"
-  | "ISSUE_COMMENT_UPDATE"
-  | "ISSUE_COMMENT_DELETE";
+type IssueCommentEventType = "ISSUE_COMMENT_CREATE" | "ISSUE_COMMENT_UPDATE" | "ISSUE_COMMENT_DELETE";
 
-type Toggle =
-  | "TOGGLE_CYCLE"
-  | "TOGGLE_MODULE"
-  | "TOGGLE_VIEW"
-  | "TOGGLE_PAGES"
-  | "TOGGLE_STATE"
-  | "TOGGLE_INBOX";
+type Toggle = "TOGGLE_CYCLE" | "TOGGLE_MODULE" | "TOGGLE_VIEW" | "TOGGLE_PAGES" | "TOGGLE_STATE" | "TOGGLE_INBOX";
 
 export type MiscellaneousEventType = `${Toggle}_ON` | `${Toggle}_OFF`;
 
@@ -121,16 +111,12 @@ type ReactionEventType =
   | "ISSUE_REACTION_DELETE"
   | "ISSUE_COMMENT_REACTION_DELETE";
 
-class TrackEventServices extends APIService {
+export class TrackEventService extends APIService {
   constructor() {
     super("/");
   }
 
-  async trackWorkspaceEvent(
-    data: IWorkspace | any,
-    eventName: WorkspaceEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackWorkspaceEvent(data: IWorkspace | any, eventName: WorkspaceEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
@@ -160,19 +146,11 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackProjectEvent(
-    data: Partial<IProject> | any,
-    eventName: ProjectEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackProjectEvent(data: Partial<IProject> | any, eventName: ProjectEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
-    if (
-      eventName !== "DELETE_PROJECT" &&
-      eventName !== "PROJECT_MEMBER_INVITE" &&
-      eventName !== "PROJECT_MEMBER_LEAVE"
-    )
+    if (eventName !== "DELETE_PROJECT" && eventName !== "PROJECT_MEMBER_INVITE" && eventName !== "PROJECT_MEMBER_LEAVE")
       payload = {
         workspaceId: data?.workspace_detail?.id,
         workspaceName: data?.workspace_detail?.name,
@@ -195,10 +173,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackUserOnboardingCompleteEvent(
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackUserOnboardingCompleteEvent(data: any, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     return this.request({
@@ -214,10 +189,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackUserTourCompleteEvent(
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackUserTourCompleteEvent(data: any, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     return this.request({
@@ -233,11 +205,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackIssueEvent(
-    data: IIssue | any,
-    eventName: IssueEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackIssueEvent(data: IIssue | any, eventName: IssueEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
@@ -266,10 +234,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackIssueMarkedAsDoneEvent(
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackIssueMarkedAsDoneEvent(data: any, user: IUser): Promise<any> {
     if (!trackEvent) return;
     return this.request({
       url: "/api/track-event",
@@ -292,7 +257,7 @@ class TrackEventServices extends APIService {
       | "ISSUE_PROPERTY_UPDATE_ASSIGNEE"
       | "ISSUE_PROPERTY_UPDATE_DUE_DATE"
       | "ISSUE_PROPERTY_UPDATE_ESTIMATE",
-    user: ICurrentUserResponse | undefined
+    user: IUser
   ): Promise<any> {
     if (!trackEvent) return;
     return this.request({
@@ -311,7 +276,7 @@ class TrackEventServices extends APIService {
   async trackIssueCommentEvent(
     data: Partial<IIssueComment> | any,
     eventName: IssueCommentEventType,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
     if (!trackEvent) return;
 
@@ -343,7 +308,7 @@ class TrackEventServices extends APIService {
   async trackIssueRelationEvent(
     data: any,
     eventName: "ISSUE_RELATION_CREATE" | "ISSUE_RELATION_DELETE",
-    user: ICurrentUserResponse
+    user: IUser
   ): Promise<any> {
     if (!trackEvent) return;
 
@@ -365,7 +330,7 @@ class TrackEventServices extends APIService {
       | "ISSUE_MOVED_TO_MODULE"
       | "ISSUE_MOVED_TO_CYCLE_IN_BULK"
       | "ISSUE_MOVED_TO_MODULE_IN_BULK",
-    user: ICurrentUserResponse | undefined
+    user: IUser
   ): Promise<any> {
     if (!trackEvent) return;
 
@@ -382,7 +347,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackIssueBulkDeleteEvent(data: any, user: ICurrentUserResponse | undefined): Promise<any> {
+  async trackIssueBulkDeleteEvent(data: any, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     return this.request({
@@ -398,11 +363,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackIssueLabelEvent(
-    data: any,
-    eventName: IssueLabelEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackIssueLabelEvent(data: any, eventName: IssueLabelEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     return this.request({
@@ -418,11 +379,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackStateEvent(
-    data: IState | any,
-    eventName: StateEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackStateEvent(data: IState | any, eventName: StateEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
@@ -451,11 +408,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackCycleEvent(
-    data: ICycle | any,
-    eventName: CycleEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackCycleEvent(data: ICycle | any, eventName: CycleEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
@@ -484,11 +437,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackModuleEvent(
-    data: IModule | any,
-    eventName: ModuleEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackModuleEvent(data: IModule | any, eventName: ModuleEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
@@ -517,11 +466,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackPageEvent(
-    data: Partial<IPage> | any,
-    eventName: PagesEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackPageEvent(data: Partial<IPage> | any, eventName: PagesEventType, user: IUser | undefined): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
@@ -553,7 +498,7 @@ class TrackEventServices extends APIService {
   async trackPageBlockEvent(
     data: Partial<IPageBlock> | IIssue,
     eventName: PageBlocksEventType,
-    user: ICurrentUserResponse | undefined
+    user: IUser
   ): Promise<any> {
     if (!trackEvent) return;
 
@@ -594,11 +539,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackAskGptEvent(
-    data: IGptResponse,
-    eventName: GptEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackAskGptEvent(data: IGptResponse, eventName: GptEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     const payload = {
@@ -623,11 +564,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackUseGPTResponseEvent(
-    data: IIssue | IPageBlock,
-    eventName: GptEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackUseGPTResponseEvent(data: IIssue | IPageBlock, eventName: GptEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
@@ -668,11 +605,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackViewEvent(
-    data: IView,
-    eventName: ViewEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackViewEvent(data: IProjectView, eventName: ViewEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
@@ -699,11 +632,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackMiscellaneousEvent(
-    data: any,
-    eventName: MiscellaneousEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackMiscellaneousEvent(data: any, eventName: MiscellaneousEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     return this.request({
@@ -719,11 +648,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackAppIntegrationEvent(
-    data: any,
-    eventName: IntegrationEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackAppIntegrationEvent(data: any, eventName: IntegrationEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     return this.request({
@@ -739,11 +664,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackGitHubSyncEvent(
-    data: any,
-    eventName: GitHubSyncEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackGitHubSyncEvent(data: any, eventName: GitHubSyncEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     return this.request({
@@ -762,7 +683,7 @@ class TrackEventServices extends APIService {
   async trackIssueEstimateEvent(
     data: { estimate: IEstimate },
     eventName: IssueEstimateEventType,
-    user: ICurrentUserResponse | undefined
+    user: IUser
   ): Promise<any> {
     if (!trackEvent) return;
 
@@ -792,16 +713,11 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackImporterEvent(
-    data: any,
-    eventName: ImporterEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackImporterEvent(data: any, eventName: ImporterEventType, user: IUser | undefined): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
-    if (eventName === "GITHUB_IMPORTER_DELETE" || eventName === "JIRA_IMPORTER_DELETE")
-      payload = data;
+    if (eventName === "GITHUB_IMPORTER_DELETE" || eventName === "JIRA_IMPORTER_DELETE") payload = data;
     else
       payload = {
         workspaceId: data?.workspace_detail?.id,
@@ -825,11 +741,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackAnalyticsEvent(
-    data: any,
-    eventName: AnalyticsEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackAnalyticsEvent(data: any, eventName: AnalyticsEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     const payload = { ...data };
@@ -845,11 +757,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackExporterEvent(
-    data: any,
-    eventName: ExporterEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackExporterEvent(data: any, eventName: ExporterEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     const payload = { ...data };
@@ -868,11 +776,7 @@ class TrackEventServices extends APIService {
   }
 
   // TODO: add types to the data
-  async trackInboxEvent(
-    data: any,
-    eventName: InboxEventType,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackInboxEvent(data: any, eventName: InboxEventType, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
@@ -904,13 +808,12 @@ class TrackEventServices extends APIService {
   async trackReactionEvent(
     data: IssueReaction | IssueCommentReaction,
     eventName: ReactionEventType,
-    user: ICurrentUserResponse | undefined
+    user: IUser
   ): Promise<any> {
     if (!trackEvent) return;
 
     let payload: any;
-    if (eventName === "ISSUE_REACTION_DELETE" || eventName === "ISSUE_COMMENT_REACTION_DELETE")
-      payload = data;
+    if (eventName === "ISSUE_REACTION_DELETE" || eventName === "ISSUE_COMMENT_REACTION_DELETE") payload = data;
     else
       payload = {
         workspaceId: data?.workspace,
@@ -929,11 +832,7 @@ class TrackEventServices extends APIService {
     });
   }
 
-  async trackProjectPublishSettingsEvent(
-    data: any,
-    eventName: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async trackProjectPublishSettingsEvent(data: any, eventName: string, user: IUser): Promise<any> {
     if (!trackEvent) return;
 
     const payload: any = data;
@@ -949,7 +848,3 @@ class TrackEventServices extends APIService {
     });
   }
 }
-
-const trackEventServices = new TrackEventServices();
-
-export default trackEventServices;
diff --git a/web/services/user.service.ts b/web/services/user.service.ts
index 7202c8bc0..f5c4ac17e 100644
--- a/web/services/user.service.ts
+++ b/web/services/user.service.ts
@@ -1,20 +1,22 @@
 // services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
 import type {
-  ICurrentUserResponse,
   IIssue,
   IUser,
   IUserActivityResponse,
   IUserProfileData,
   IUserProfileProjectSegregation,
+  IUserSettings,
   IUserWorkspaceDashboard,
 } from "types";
-
+// helpers
 import { API_BASE_URL } from "helpers/common.helper";
 
-class UserService extends APIService {
+const trackEventService = new TrackEventService();
+
+export class UserService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -44,7 +46,7 @@ class UserService extends APIService {
       });
   }
 
-  async currentUser(): Promise<ICurrentUserResponse> {
+  async currentUser(): Promise<IUser> {
     return this.get("/api/users/me/")
       .then((response) => response?.data)
       .catch((error) => {
@@ -52,6 +54,14 @@ class UserService extends APIService {
       });
   }
 
+  async currentUserSettings(): Promise<IUserSettings> {
+    return this.get("/api/users/me/settings/")
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response;
+      });
+  }
+
   async updateUser(data: Partial<IUser>): Promise<any> {
     return this.patch("/api/users/me/", data)
       .then((response) => response?.data)
@@ -60,16 +70,16 @@ class UserService extends APIService {
       });
   }
 
-  async updateUserOnBoard({ userRole }: any, user: ICurrentUserResponse | undefined): Promise<any> {
+  async updateUserOnBoard({ userRole }: any, user: IUser | undefined): Promise<any> {
     return this.patch("/api/users/me/onboard/", {
       is_onboarded: true,
     })
       .then((response) => {
-        trackEventServices.trackUserOnboardingCompleteEvent(
+        trackEventService.trackUserOnboardingCompleteEvent(
           {
             user_role: userRole ?? "None",
           },
-          user
+          user as IUser
         );
         return response?.data;
       })
@@ -78,12 +88,12 @@ class UserService extends APIService {
       });
   }
 
-  async updateUserTourCompleted(user: ICurrentUserResponse): Promise<any> {
+  async updateUserTourCompleted(user: IUser): Promise<any> {
     return this.patch("/api/users/me/tour-completed/", {
       is_tour_completed: true,
     })
       .then((response) => {
-        trackEventServices.trackUserTourCompleteEvent({ user_role: user.role ?? "None" }, user);
+        trackEventService.trackUserTourCompleteEvent({ user_role: user.role ?? "None" }, user);
         return response?.data;
       })
       .catch((error) => {
@@ -99,10 +109,7 @@ class UserService extends APIService {
       });
   }
 
-  async userWorkspaceDashboard(
-    workspaceSlug: string,
-    month: number
-  ): Promise<IUserWorkspaceDashboard> {
+  async userWorkspaceDashboard(workspaceSlug: string, month: number): Promise<IUserWorkspaceDashboard> {
     return this.get(`/api/users/me/workspaces/${workspaceSlug}/dashboard/`, {
       params: {
         month: month,
@@ -156,10 +163,7 @@ class UserService extends APIService {
       });
   }
 
-  async getUserProfileActivity(
-    workspaceSlug: string,
-    userId: string
-  ): Promise<IUserActivityResponse> {
+  async getUserProfileActivity(workspaceSlug: string, userId: string): Promise<IUserActivityResponse> {
     return this.get(`/api/workspaces/${workspaceSlug}/user-activity/${userId}/?per_page=15`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -186,5 +190,3 @@ class UserService extends APIService {
       });
   }
 }
-
-export default new UserService();
diff --git a/web/services/view.service.ts b/web/services/view.service.ts
new file mode 100644
index 000000000..97f0db9a2
--- /dev/null
+++ b/web/services/view.service.ts
@@ -0,0 +1,99 @@
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
+// types
+import { IProjectView } from "types/views";
+// helpers
+import { API_BASE_URL } from "helpers/common.helper";
+
+const trackEventService = new TrackEventService();
+
+export class ViewService extends APIService {
+  constructor() {
+    super(API_BASE_URL);
+  }
+
+  async createView(workspaceSlug: string, projectId: string, data: Partial<IProjectView>, user: any): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`, data)
+      .then((response) => {
+        trackEventService.trackViewEvent(response?.data, "VIEW_CREATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async patchView(
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: Partial<IProjectView>,
+    user: any
+  ): Promise<any> {
+    return this.patch(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`, data)
+      .then((response) => {
+        trackEventService.trackViewEvent(response?.data, "VIEW_UPDATE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async deleteView(workspaceSlug: string, projectId: string, viewId: string, user: any): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
+      .then((response) => {
+        trackEventService.trackViewEvent(response?.data, "VIEW_DELETE", user);
+        return response?.data;
+      })
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViews(workspaceSlug: string, projectId: string): Promise<IProjectView[]> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewDetails(workspaceSlug: string, projectId: string, viewId: string): Promise<IProjectView> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async getViewIssues(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
+    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/issues/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async addViewToFavorites(
+    workspaceSlug: string,
+    projectId: string,
+    data: {
+      view: string;
+    }
+  ): Promise<any> {
+    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/`, data)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+
+  async removeViewFromFavorites(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
+    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/${viewId}/`)
+      .then((response) => response?.data)
+      .catch((error) => {
+        throw error?.response?.data;
+      });
+  }
+}
diff --git a/web/services/views.service.ts b/web/services/views.service.ts
deleted file mode 100644
index 17836085d..000000000
--- a/web/services/views.service.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
-// types
-import { IView } from "types/views";
-import { ICurrentUserResponse } from "types";
-// helpers
-import { API_BASE_URL } from "helpers/common.helper";
-
-class ViewServices extends APIService {
-  constructor() {
-    super(API_BASE_URL);
-  }
-
-  async createView(
-    workspaceSlug: string,
-    projectId: string,
-    data: IView,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`, data)
-      .then((response) => {
-        trackEventServices.trackViewEvent(response?.data, "VIEW_CREATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async updateView(
-    workspaceSlug: string,
-    projectId: string,
-    viewId: string,
-    data: IView,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.put(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`, data)
-      .then((response) => {
-        trackEventServices.trackViewEvent(response?.data, "VIEW_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async patchView(
-    workspaceSlug: string,
-    projectId: string,
-    viewId: string,
-    data: Partial<IView>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.patch(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`,
-      data
-    )
-      .then((response) => {
-        trackEventServices.trackViewEvent(response?.data, "VIEW_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async deleteView(
-    workspaceSlug: string,
-    projectId: string,
-    viewId: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.delete(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
-      .then((response) => {
-        trackEventServices.trackViewEvent(response?.data, "VIEW_DELETE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getViews(workspaceSlug: string, projectId: string): Promise<IView[]> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getViewDetails(workspaceSlug: string, projectId: string, viewId: string): Promise<IView> {
-    return this.get(`/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/`)
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async getViewIssues(workspaceSlug: string, projectId: string, viewId: string): Promise<any> {
-    return this.get(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/views/${viewId}/issues/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async addViewToFavorites(
-    workspaceSlug: string,
-    projectId: string,
-    data: {
-      view: string;
-    }
-  ): Promise<any> {
-    return this.post(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/`,
-      data
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
-  async removeViewFromFavorites(
-    workspaceSlug: string,
-    projectId: string,
-    viewId: string
-  ): Promise<any> {
-    return this.delete(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/user-favorite-views/${viewId}/`
-    )
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-}
-
-export default new ViewServices();
diff --git a/web/services/web-waitlist.service.ts b/web/services/web-waitlist.service.ts
deleted file mode 100644
index b56906bba..000000000
--- a/web/services/web-waitlist.service.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-// services
-import APIService from "services/api.service";
-
-// types
-import { IWebWaitListResponse } from "types";
-
-class WebWailtListServices extends APIService {
-  constructor() {
-    const origin = typeof window !== "undefined" ? window.location.origin || "" : "";
-    super(origin);
-  }
-
-  async create({ email }: { email: string }): Promise<IWebWaitListResponse> {
-    return this.post(`/api/web-waitlist`, { email: email })
-      .then((response) => response?.data)
-      .catch((error) => {
-        throw error?.response;
-      });
-  }
-}
-
-export default new WebWailtListServices();
diff --git a/web/services/workspace.service.ts b/web/services/workspace.service.ts
index f9859d3b3..3d97eca9c 100644
--- a/web/services/workspace.service.ts
+++ b/web/services/workspace.service.ts
@@ -1,6 +1,6 @@
 // services
-import APIService from "services/api.service";
-import trackEventServices from "services/track-event.service";
+import { APIService } from "services/api.service";
+import { TrackEventService } from "services/track_event.service";
 // helpers
 import { API_BASE_URL } from "helpers/common.helper";
 // types
@@ -11,14 +11,17 @@ import {
   ILastActiveWorkspaceDetails,
   IWorkspaceSearchResults,
   IProductUpdateResponse,
-  ICurrentUserResponse,
+  IUser,
   IWorkspaceBulkInviteFormData,
   IWorkspaceViewProps,
-  IWorkspaceViewIssuesParams,
 } from "types";
 import { IWorkspaceView } from "types/workspace-views";
+// store
+import { IIssueGroupWithSubGroupsStructure, IIssueGroupedStructure, IIssueUnGroupedStructure } from "store/issue";
 
-class WorkspaceService extends APIService {
+const trackEventService = new TrackEventService();
+
+export class WorkspaceService extends APIService {
   constructor() {
     super(API_BASE_URL);
   }
@@ -39,13 +42,10 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async createWorkspace(
-    data: Partial<IWorkspace>,
-    user: ICurrentUserResponse | undefined
-  ): Promise<IWorkspace> {
+  async createWorkspace(data: Partial<IWorkspace>, user: IUser | undefined): Promise<IWorkspace> {
     return this.post("/api/workspaces/", data)
       .then((response) => {
-        trackEventServices.trackWorkspaceEvent(response.data, "CREATE_WORKSPACE", user);
+        trackEventService.trackWorkspaceEvent(response.data, "CREATE_WORKSPACE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -56,11 +56,11 @@ class WorkspaceService extends APIService {
   async updateWorkspace(
     workspaceSlug: string,
     data: Partial<IWorkspace>,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<IWorkspace> {
     return this.patch(`/api/workspaces/${workspaceSlug}/`, data)
       .then((response) => {
-        trackEventServices.trackWorkspaceEvent(response.data, "UPDATE_WORKSPACE", user);
+        trackEventService.trackWorkspaceEvent(response.data, "UPDATE_WORKSPACE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -68,13 +68,10 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async deleteWorkspace(
-    workspaceSlug: string,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
+  async deleteWorkspace(workspaceSlug: string, user: IUser | undefined): Promise<any> {
     return this.delete(`/api/workspaces/${workspaceSlug}/`)
       .then((response) => {
-        trackEventServices.trackWorkspaceEvent({ workspaceSlug }, "DELETE_WORKSPACE", user);
+        trackEventService.trackWorkspaceEvent({ workspaceSlug }, "DELETE_WORKSPACE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -85,11 +82,11 @@ class WorkspaceService extends APIService {
   async inviteWorkspace(
     workspaceSlug: string,
     data: IWorkspaceBulkInviteFormData,
-    user: ICurrentUserResponse | undefined
+    user: IUser | undefined
   ): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/invite/`, data)
       .then((response) => {
-        trackEventServices.trackWorkspaceEvent(response.data, "WORKSPACE_USER_INVITE", user);
+        trackEventService.trackWorkspaceEvent(response.data, "WORKSPACE_USER_INVITE", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -97,21 +94,12 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async joinWorkspace(
-    workspaceSlug: string,
-    invitationId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.post(
-      `/api/users/me/invitations/workspaces/${workspaceSlug}/${invitationId}/join/`,
-      data,
-      {
-        headers: {},
-      }
-    )
+  async joinWorkspace(workspaceSlug: string, invitationId: string, data: any, user: IUser | undefined): Promise<any> {
+    return this.post(`/api/users/me/invitations/workspaces/${workspaceSlug}/${invitationId}/join/`, data, {
+      headers: {},
+    })
       .then((response) => {
-        trackEventServices.trackWorkspaceEvent(response.data, "WORKSPACE_USER_INVITE_ACCEPT", user);
+        trackEventService.trackWorkspaceEvent(response.data, "WORKSPACE_USER_INVITE_ACCEPT", user as IUser);
         return response?.data;
       })
       .catch((error) => {
@@ -167,10 +155,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async updateWorkspaceView(
-    workspaceSlug: string,
-    data: { view_props: IWorkspaceViewProps }
-  ): Promise<any> {
+  async updateWorkspaceView(workspaceSlug: string, data: { view_props: IWorkspaceViewProps }): Promise<any> {
     return this.post(`/api/workspaces/${workspaceSlug}/workspace-views/`, data)
       .then((response) => response?.data)
       .catch((error) => {
@@ -206,9 +191,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async workspaceInvitationsWithEmail(
-    workspaceSlug: string
-  ): Promise<IWorkspaceMemberInvitation[]> {
+  async workspaceInvitationsWithEmail(workspaceSlug: string): Promise<IWorkspaceMemberInvitation[]> {
     return this.get(`/api/workspaces/${workspaceSlug}/invitations/`)
       .then((response) => response?.data)
       .catch((error) => {
@@ -264,7 +247,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async createView(workspaceSlug: string, data: IWorkspaceView): Promise<any> {
+  async createView(workspaceSlug: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
     return this.post(`/api/workspaces/${workspaceSlug}/views/`, data)
       .then((response) => response?.data)
       .catch((error) => {
@@ -272,11 +255,7 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async updateView(
-    workspaceSlug: string,
-    viewId: string,
-    data: Partial<IWorkspaceView>
-  ): Promise<any> {
+  async updateView(workspaceSlug: string, viewId: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> {
     return this.patch(`/api/workspaces/${workspaceSlug}/views/${viewId}/`, data)
       .then((response) => response?.data)
       .catch((error) => {
@@ -308,7 +287,10 @@ class WorkspaceService extends APIService {
       });
   }
 
-  async getViewIssues(workspaceSlug: string, params: IWorkspaceViewIssuesParams): Promise<any> {
+  async getViewIssues(
+    workspaceSlug: string,
+    params: any
+  ): Promise<IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure> {
     return this.get(`/api/workspaces/${workspaceSlug}/issues/`, {
       params,
     })
@@ -318,5 +300,3 @@ class WorkspaceService extends APIService {
       });
   }
 }
-
-export default new WorkspaceService();
diff --git a/web/store/calendar.store.ts b/web/store/calendar.store.ts
new file mode 100644
index 000000000..3d4f5cfdd
--- /dev/null
+++ b/web/store/calendar.store.ts
@@ -0,0 +1,121 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+
+// helpers
+import { generateCalendarData } from "helpers/calendar.helper";
+// types
+import { RootStore } from "./root";
+import { ICalendarPayload, ICalendarWeek } from "components/issues";
+import { getWeekNumberOfDate } from "helpers/date-time.helper";
+
+export interface ICalendarStore {
+  calendarFilters: {
+    activeMonthDate: Date;
+    activeWeekDate: Date;
+  };
+  calendarPayload: ICalendarPayload | null;
+
+  // action
+  updateCalendarFilters: (filters: Partial<{ activeMonthDate: Date; activeWeekDate: Date }>) => void;
+  updateCalendarPayload: (date: Date) => void;
+
+  // computed
+  allWeeksOfActiveMonth:
+    | {
+        [weekNumber: string]: ICalendarWeek;
+      }
+    | undefined;
+  activeWeekNumber: number;
+  allDaysOfActiveWeek: ICalendarWeek | undefined;
+}
+
+class CalendarStore implements ICalendarStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  calendarFilters: { activeMonthDate: Date; activeWeekDate: Date } = {
+    activeMonthDate: new Date(),
+    activeWeekDate: new Date(),
+  };
+  calendarPayload: ICalendarPayload | null = null;
+
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      calendarFilters: observable.ref,
+      calendarPayload: observable.ref,
+
+      // actions
+      updateCalendarFilters: action,
+      updateCalendarPayload: action,
+
+      //computed
+      allWeeksOfActiveMonth: computed,
+      activeWeekNumber: computed,
+      allDaysOfActiveWeek: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.initCalendar();
+  }
+
+  get allWeeksOfActiveMonth() {
+    if (!this.calendarPayload) return undefined;
+
+    const { activeMonthDate } = this.calendarFilters;
+
+    return this.calendarPayload[`y-${activeMonthDate.getFullYear()}`][`m-${activeMonthDate.getMonth()}`];
+  }
+
+  get activeWeekNumber() {
+    return getWeekNumberOfDate(this.calendarFilters.activeWeekDate);
+  }
+
+  get allDaysOfActiveWeek() {
+    if (!this.calendarPayload) return undefined;
+
+    const { activeWeekDate } = this.calendarFilters;
+
+    return this.calendarPayload[`y-${activeWeekDate.getFullYear()}`][`m-${activeWeekDate.getMonth()}`][
+      `w-${this.activeWeekNumber}`
+    ];
+  }
+
+  updateCalendarFilters = (filters: Partial<{ activeMonthDate: Date; activeWeekDate: Date }>) => {
+    this.updateCalendarPayload(filters.activeMonthDate || filters.activeWeekDate || new Date());
+
+    runInAction(() => {
+      this.calendarFilters = {
+        ...this.calendarFilters,
+        ...filters,
+      };
+    });
+  };
+
+  updateCalendarPayload = (date: Date) => {
+    if (!this.calendarPayload) return null;
+
+    const nextDate = new Date(date);
+
+    runInAction(() => {
+      this.calendarPayload = generateCalendarData(this.calendarPayload, nextDate);
+    });
+  };
+
+  initCalendar = () => {
+    const newCalendarPayload = generateCalendarData(null, new Date());
+
+    runInAction(() => {
+      this.calendarPayload = newCalendarPayload;
+    });
+  };
+}
+
+export default CalendarStore;
diff --git a/web/store/cycle/cycle_issue.store.ts b/web/store/cycle/cycle_issue.store.ts
new file mode 100644
index 000000000..8ab84f0ae
--- /dev/null
+++ b/web/store/cycle/cycle_issue.store.ts
@@ -0,0 +1,190 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { CycleService } from "services/cycle.service";
+// constants
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+
+export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped";
+export type IIssueGroupedStructure = { [group_id: string]: IIssue[] };
+export type IIssueGroupWithSubGroupsStructure = {
+  [group_id: string]: {
+    [sub_group_id: string]: IIssue[];
+  };
+};
+export type IIssueUnGroupedStructure = IIssue[];
+
+export interface ICycleIssueStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issues: {
+    [cycleId: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class CycleIssueStore implements ICycleIssueStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issues: {
+    [cycle_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+  // service
+  cycleService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+    });
+    this.rootStore = _rootStore;
+    this.cycleService = new CycleService();
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueSubGroup
+        ? "groupWithSubGroups"
+        : "grouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const cycleId: string | null = this.rootStore?.cycle?.cycleId;
+    const issueType = this.getIssueType;
+    if (!cycleId || !issueType) return null;
+
+    return this.issues?.[cycleId]?.[issueType] || null;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const cycleId: string | null = this.rootStore?.cycle?.cycleId || null;
+    const issueType = this.getIssueType;
+    if (!cycleId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [cycleId]: { ...this.issues[cycleId], [issueType]: issues } };
+    });
+  };
+
+  fetchIssues = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
+      this.rootStore.project.setProjectId(projectId);
+      this.rootStore.cycle.setCycleId(cycleId);
+
+      const params = this.rootStore?.cycleIssueFilter?.appliedFilters;
+      const issueResponse = await this.cycleService.getCycleIssuesWithParams(workspaceSlug, projectId, cycleId, params);
+
+      const issueType = this.getIssueType;
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [cycleId]: {
+            ...this.issues[cycleId],
+            [issueType]: issueResponse,
+          },
+        };
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+}
diff --git a/web/store/cycle/cycle_issue_filters.store.ts b/web/store/cycle/cycle_issue_filters.store.ts
new file mode 100644
index 000000000..c6818b6df
--- /dev/null
+++ b/web/store/cycle/cycle_issue_filters.store.ts
@@ -0,0 +1,147 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// services
+import { CycleService } from "services/cycle.service";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueFilterOptions, TIssueParams } from "types";
+
+export interface ICycleIssueFilterStore {
+  loader: boolean;
+  error: any | null;
+  cycleFilters: IIssueFilterOptions;
+
+  // action
+  fetchCycleFilters: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+  updateCycleFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    filterToUpdate: Partial<IIssueFilterOptions>
+  ) => Promise<void>;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class CycleIssueFilterStore implements ICycleIssueFilterStore {
+  // observables
+  loader: boolean = false;
+  error: any | null = null;
+  cycleFilters: IIssueFilterOptions = {};
+  // root store
+  rootStore;
+  // services
+  cycleService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observables
+      loader: observable.ref,
+      error: observable.ref,
+      cycleFilters: observable.ref,
+      // computed
+      appliedFilters: computed,
+      // actions
+      fetchCycleFilters: action,
+      updateCycleFilters: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.cycleService = new CycleService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    const userDisplayFilters = this.rootStore?.issueFilter?.userDisplayFilters;
+
+    if (!this.cycleFilters || !userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.cycleFilters?.priority || undefined,
+      state_group: this.cycleFilters?.state_group || undefined,
+      state: this.cycleFilters?.state || undefined,
+      assignees: this.cycleFilters?.assignees || undefined,
+      created_by: this.cycleFilters?.created_by || undefined,
+      labels: this.cycleFilters?.labels || undefined,
+      start_date: this.cycleFilters?.start_date || undefined,
+      target_date: this.cycleFilters?.target_date || undefined,
+      group_by: userDisplayFilters?.group_by || "state",
+      order_by: userDisplayFilters?.order_by || "-created_at",
+      sub_group_by: userDisplayFilters?.sub_group_by || undefined,
+      type: userDisplayFilters?.type || undefined,
+      sub_issue: userDisplayFilters?.sub_issue || true,
+      show_empty_groups: userDisplayFilters?.show_empty_groups || true,
+      start_target_date: userDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(userDisplayFilters.layout, "issues");
+
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+
+  fetchCycleFilters = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      const cycleResponse = await this.cycleService.getCycleDetails(workspaceSlug, projectId, cycleId);
+      runInAction(() => {
+        this.cycleFilters = cycleResponse?.view_props?.filters || {};
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to fetch user filters in issue filter store", error);
+    }
+  };
+
+  updateCycleFilters = async (
+    workspaceSlug: string,
+    projectId: string,
+    cycleId: string,
+    properties: Partial<IIssueFilterOptions>
+  ) => {
+    const newProperties = {
+      ...this.cycleFilters,
+      ...properties,
+    };
+
+    try {
+      runInAction(() => {
+        this.cycleFilters = newProperties;
+      });
+
+      const payload = {
+        view_props: {
+          filters: newProperties,
+        },
+      };
+
+      await this.cycleService.updateCycle(workspaceSlug, projectId, cycleId, payload, undefined);
+    } catch (error) {
+      this.fetchCycleFilters(workspaceSlug, projectId, cycleId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user filters in issue filter store", error);
+    }
+  };
+}
diff --git a/web/store/cycle/cycle_issue_kanban_view.store.ts b/web/store/cycle/cycle_issue_kanban_view.store.ts
new file mode 100644
index 000000000..76e6a80e8
--- /dev/null
+++ b/web/store/cycle/cycle_issue_kanban_view.store.ts
@@ -0,0 +1,450 @@
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "store/issue";
+import { IUser } from "types";
+
+export interface ICycleIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  };
+  // computed
+  canUserDragDrop: boolean;
+  canUserDragDropVertically: boolean;
+  canUserDragDropHorizontally: boolean;
+  // actions
+  handleKanBanToggle: (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => void;
+  handleSwimlaneDragDrop: (source: any, destination: any) => void;
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class CycleIssueKanBanViewStore implements ICycleIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  } = { groupByHeaderMinMax: [], subgroupByIssuesVisibility: [] };
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      kanBanToggle: observable,
+      // computed
+      canUserDragDrop: computed,
+      canUserDragDropVertically: computed,
+      canUserDragDropHorizontally: computed,
+
+      // actions
+      handleKanBanToggle: action,
+      handleSwimlaneDragDrop: action,
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  get canUserDragDrop() {
+    if (
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by === "sort_order" &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.group_by &&
+      ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.group_by)
+    ) {
+      if (!this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by) return true;
+      if (
+        this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by &&
+        ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by)
+      )
+        return true;
+    }
+    return false;
+  }
+
+  get canUserDragDropVertically() {
+    return false;
+  }
+
+  get canUserDragDropHorizontally() {
+    return false;
+  }
+
+  handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    this.kanBanToggle = {
+      ...this.kanBanToggle,
+      [toggle]: this.kanBanToggle[toggle].includes(value)
+        ? this.kanBanToggle[toggle].filter((v) => v !== value)
+        : [...this.kanBanToggle[toggle], value],
+    };
+  };
+
+  handleSwimlaneDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.cycleIssue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source.droppableId;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination.droppableId;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const source_sub_group_id: string = droppableSourceColumnId[1] === "null" ? null : droppableSourceColumnId[1];
+
+      const destination_group_id: string = droppableDestinationColumnId[0];
+      const destination_sub_group_id: string =
+        droppableDestinationColumnId[1] === "null" ? null : droppableDestinationColumnId[1];
+
+      if (source_sub_group_id === destination_sub_group_id) {
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_sub_group_id][source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_sub_group_id][source_group_id] = _issues;
+        }
+
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+          let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+          currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+        }
+      }
+
+      if (source_sub_group_id != destination_sub_group_id) {
+        const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+        let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+        if (_destinationIssues && _destinationIssues.length > 0) {
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _destinationIssues.length) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order:
+                (_destinationIssues[destination.index - 1].sort_order +
+                  _destinationIssues[destination.index].sort_order) /
+                2,
+            };
+          }
+        } else {
+          updateIssue = {
+            ...updateIssue,
+            sort_order: sortOrderDefaultValue,
+          };
+        }
+
+        let issueStatePriority = {};
+        if (source_group_id === destination_group_id) {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_sub_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_sub_group_id };
+          }
+        } else {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id, priority: destination_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_sub_group_id,
+              priority: destination_group_id,
+            };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, state: destination_group_id, priority: destination_sub_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_group_id,
+              priority: destination_sub_group_id,
+            };
+          }
+        }
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            sort_order: updateIssue.sort_order,
+            ...issueStatePriority,
+          });
+        else
+          _destinationIssues = [
+            ..._destinationIssues,
+            { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+          ];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id };
+        currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+        currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.cycleIssue.issues,
+        [projectId]: {
+          ...this.rootStore?.cycleIssue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.cycleIssue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.cycleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue,
+        {} as IUser
+      );
+    }
+  };
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.cycleIssue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source.droppableId;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination.droppableId;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const destination_group_id: string = droppableDestinationColumnId[0];
+
+      if (this.canUserDragDrop) {
+        // vertical
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_group_id] = _issues;
+        }
+
+        // horizontal
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_group_id];
+          let _destinationIssues = currentIssues[destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_group_id] = _sourceIssues;
+          currentIssues[destination_group_id] = _destinationIssues;
+        }
+      }
+
+      // user can drag the issues only vertically
+      if (this.canUserDragDropVertically && destination_group_id === destination_group_id) {
+      }
+
+      // user can drag the issues only horizontally
+      if (this.canUserDragDropHorizontally && destination_group_id != destination_group_id) {
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.cycleIssue.issues,
+        [projectId]: {
+          ...this.rootStore?.cycleIssue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.cycleIssue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.cycleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue,
+        {} as IUser
+      );
+    }
+  };
+}
diff --git a/web/store/cycle/cycles.store.ts b/web/store/cycle/cycles.store.ts
new file mode 100644
index 000000000..d3767c88a
--- /dev/null
+++ b/web/store/cycle/cycles.store.ts
@@ -0,0 +1,258 @@
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { ICycle } from "types";
+// services
+import { ProjectService } from "services/project";
+import { IssueService } from "services/issue";
+import { CycleService } from "services/cycle.service";
+
+export interface ICycleStore {
+  loader: boolean;
+  error: any | null;
+
+  cycleId: string | null;
+  cycles: {
+    [project_id: string]: ICycle[];
+  };
+  cycle_details: {
+    [cycle_id: string]: ICycle;
+  };
+
+  // computed
+  getCycleById: (cycleId: string) => ICycle | null;
+
+  // actions
+  setCycleId: (cycleId: string) => void;
+
+  fetchCycles: (
+    workspaceSlug: string,
+    projectId: string,
+    params: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete"
+  ) => Promise<void>;
+  fetchCycleWithId: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<ICycle>;
+  createCycle: (workspaceSlug: string, projectId: string, data: any) => Promise<ICycle>;
+  updateCycle: (workspaceSlug: string, projectId: string, cycleId: string, data: any) => Promise<ICycle>;
+
+  addCycleToFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<any>;
+  removeCycleFromFavorites: (workspaceSlug: string, projectId: string, cycleId: string) => Promise<void>;
+}
+
+export class CycleStore implements ICycleStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  cycleId: string | null = null;
+  cycles: {
+    [project_id: string]: ICycle[];
+  } = {};
+
+  cycle_details: {
+    [cycle_id: string]: ICycle;
+  } = {};
+
+  // root store
+  rootStore;
+  // services
+  projectService;
+  issueService;
+  cycleService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      loader: observable,
+      error: observable.ref,
+
+      cycleId: observable,
+      cycles: observable.ref,
+      cycle_details: observable.ref,
+
+      // computed
+      projectCycles: computed,
+
+      // actions
+      setCycleId: action,
+      getCycleById: action,
+
+      fetchCycles: action,
+      fetchCycleWithId: action,
+      createCycle: action,
+
+      addCycleToFavorites: action,
+      removeCycleFromFavorites: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.issueService = new IssueService();
+    this.cycleService = new CycleService();
+  }
+
+  // computed
+  get projectCycles() {
+    if (!this.rootStore.project.projectId) return null;
+    return this.cycles[this.rootStore.project.projectId] || null;
+  }
+
+  getCycleById = (cycleId: string) => this.cycle_details[cycleId] || null;
+
+  // actions
+  setCycleId = (cycleId: string) => {
+    this.cycleId = cycleId;
+  };
+
+  fetchCycles = async (
+    workspaceSlug: string,
+    projectId: string,
+    params: "all" | "current" | "upcoming" | "draft" | "completed" | "incomplete"
+  ) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const cyclesResponse = await this.cycleService.getCyclesWithParams(workspaceSlug, projectId, params);
+
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: cyclesResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error("Failed to fetch project cycles in project store", error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  fetchCycleWithId = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      const response = await this.cycleService.getCycleDetails(workspaceSlug, projectId, cycleId);
+
+      runInAction(() => {
+        this.cycle_details = {
+          ...this.cycle_details,
+          [response?.id]: response,
+        };
+      });
+      return response;
+    } catch (error) {
+      console.log("Failed to fetch cycle detail from cycle store");
+      throw error;
+    }
+  };
+
+  createCycle = async (workspaceSlug: string, projectId: string, data: any) => {
+    try {
+      const response = await this.cycleService.createCycle(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser
+      );
+
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: [...this.cycles[projectId], response],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to create cycle from cycle store");
+      throw error;
+    }
+  };
+
+  updateCycle = async (workspaceSlug: string, projectId: string, cycleId: string, data: any) => {
+    try {
+      const response = await this.cycleService.updateCycle(workspaceSlug, projectId, cycleId, data, undefined);
+
+      const _cycles = {
+        ...this.cycles,
+        [projectId]: this.cycles[projectId].map((cycle) => {
+          if (cycle.id === cycleId) return { ...cycle, ...response };
+          return cycle;
+        }),
+      };
+      const _cycleDetails = {
+        ...this.cycle_details,
+        [cycleId]: { ...this.cycle_details[cycleId], ...response },
+      };
+
+      runInAction(() => {
+        this.cycles = _cycles;
+        this.cycle_details = _cycleDetails;
+      });
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update cycle from cycle store");
+      throw error;
+    }
+  };
+
+  addCycleToFavorites = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: this.cycles[projectId].map((cycle) => {
+            if (cycle.id === cycleId) return { ...cycle, is_favorite: true };
+            return cycle;
+          }),
+        };
+      });
+      // updating through api.
+      const response = await this.cycleService.addCycleToFavorites(workspaceSlug, projectId, { cycle: cycleId });
+      return response;
+    } catch (error) {
+      console.log("Failed to add cycle to favorites in the cycles store", error);
+      // resetting the local state
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: this.cycles[projectId].map((cycle) => {
+            if (cycle.id === cycleId) return { ...cycle, is_favorite: false };
+            return cycle;
+          }),
+        };
+      });
+
+      throw error;
+    }
+  };
+
+  removeCycleFromFavorites = async (workspaceSlug: string, projectId: string, cycleId: string) => {
+    try {
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: this.cycles[projectId].map((cycle) => {
+            if (cycle.id === cycleId) return { ...cycle, is_favorite: false };
+            return cycle;
+          }),
+        };
+      });
+      // updating through api
+      const response = await this.cycleService.removeCycleFromFavorites(workspaceSlug, projectId, cycleId);
+      return response;
+    } catch (error) {
+      console.log("Failed to remove cycle from favorites - Cycle Store", error);
+      // resetting the local state
+      runInAction(() => {
+        this.cycles = {
+          ...this.cycles,
+          [projectId]: this.cycles[projectId].map((cycle) => {
+            if (cycle.id === cycleId) return { ...cycle, is_favorite: true };
+            return cycle;
+          }),
+        };
+      });
+      throw error;
+    }
+  };
+}
diff --git a/web/store/cycle/index.ts b/web/store/cycle/index.ts
new file mode 100644
index 000000000..b8fb17576
--- /dev/null
+++ b/web/store/cycle/index.ts
@@ -0,0 +1,4 @@
+export * from "./cycle_issue_filters.store";
+export * from "./cycle_issue_kanban_view.store";
+export * from "./cycle_issue.store";
+export * from "./cycles.store";
diff --git a/web/store/global-view/global_view_filters.store.ts b/web/store/global-view/global_view_filters.store.ts
new file mode 100644
index 000000000..9bec4bde8
--- /dev/null
+++ b/web/store/global-view/global_view_filters.store.ts
@@ -0,0 +1,68 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueFilterOptions } from "types";
+
+export interface IGlobalViewFiltersStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  storedFilters: {
+    [viewId: string]: IIssueFilterOptions;
+  };
+
+  // actions
+  updateStoredFilters: (viewId: string, filters: Partial<IIssueFilterOptions>) => void;
+  deleteStoredFilters: (viewId: string) => void;
+}
+
+export class GlobalViewFiltersStore implements IGlobalViewFiltersStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  storedFilters: {
+    [viewId: string]: IIssueFilterOptions;
+  } = {};
+
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      storedFilters: observable.ref,
+
+      // actions
+      updateStoredFilters: action,
+      deleteStoredFilters: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  updateStoredFilters = (viewId: string, filters: Partial<IIssueFilterOptions>) => {
+    runInAction(() => {
+      this.storedFilters = {
+        ...this.storedFilters,
+        [viewId]: { ...this.storedFilters[viewId], ...filters },
+      };
+    });
+  };
+
+  deleteStoredFilters = (viewId: string) => {
+    const updatedStoredFilters = { ...this.storedFilters };
+    delete updatedStoredFilters[viewId];
+
+    runInAction(() => {
+      this.storedFilters = updatedStoredFilters;
+    });
+  };
+}
diff --git a/web/store/global-view/global_view_issues.store.ts b/web/store/global-view/global_view_issues.store.ts
new file mode 100644
index 000000000..1b2893933
--- /dev/null
+++ b/web/store/global-view/global_view_issues.store.ts
@@ -0,0 +1,165 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService } from "services/project";
+import { WorkspaceService } from "services/workspace.service";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssue, IIssueFilterOptions, TStaticViewTypes } from "types";
+
+export interface IGlobalViewIssuesStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  viewIssues: {
+    [viewId: string]: IIssue[];
+  };
+
+  // actions
+  fetchViewIssues: (workspaceSlug: string, viewId: string, filters: IIssueFilterOptions) => Promise<any>;
+  fetchStaticIssues: (workspaceSlug: string, type: TStaticViewTypes) => Promise<any>;
+}
+
+export class GlobalViewIssuesStore implements IGlobalViewIssuesStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  viewIssues: {
+    [viewId: string]: IIssue[];
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  workspaceService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      viewIssues: observable.ref,
+
+      // actions
+      fetchViewIssues: action,
+      fetchStaticIssues: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.projectService = new ProjectService();
+    this.workspaceService = new WorkspaceService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  fetchViewIssues = async (workspaceSlug: string, viewId: string, filters: IIssueFilterOptions) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const displayFilters = this.rootStore.workspaceFilter.workspaceDisplayFilters;
+
+      let filteredRouteParams: any = {
+        priority: filters?.priority || undefined,
+        project: filters?.project || undefined,
+        state_group: filters?.state_group || undefined,
+        state: filters?.state || undefined,
+        assignees: filters?.assignees || undefined,
+        created_by: filters?.created_by || undefined,
+        labels: filters?.labels || undefined,
+        start_date: filters?.start_date || undefined,
+        target_date: filters?.target_date || undefined,
+        order_by: displayFilters?.order_by || "-created_at",
+        type: displayFilters?.type || undefined,
+        sub_issue: false,
+      };
+
+      const filteredParams = handleIssueQueryParamsByLayout("spreadsheet", "my_issues");
+      if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+      const response = await this.workspaceService.getViewIssues(workspaceSlug, filteredRouteParams);
+
+      runInAction(() => {
+        this.loader = false;
+        this.viewIssues = {
+          ...this.viewIssues,
+          [viewId]: response as IIssue[],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  fetchStaticIssues = async (workspaceSlug: string, type: TStaticViewTypes) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const workspaceMemberResponse = await this.rootStore.workspaceFilter.fetchUserWorkspaceFilters(workspaceSlug);
+      const displayFilters = workspaceMemberResponse.view_props.display_filters;
+
+      let filteredRouteParams: any = {
+        order_by: displayFilters?.order_by || "-created_at",
+        type: displayFilters?.type || undefined,
+        sub_issue: false,
+      };
+
+      const filteredParams = handleIssueQueryParamsByLayout("spreadsheet", "my_issues");
+      if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+      const currentUser = this.rootStore.user.currentUser;
+
+      if (type === "assigned" && currentUser) filteredRouteParams.assignees = currentUser.id;
+      if (type === "created" && currentUser) filteredRouteParams.created_by = currentUser.id;
+      if (type === "subscribed" && currentUser) filteredRouteParams.subscriber = currentUser.id;
+
+      const response = await this.workspaceService.getViewIssues(workspaceSlug, filteredRouteParams);
+
+      runInAction(() => {
+        this.loader = false;
+        this.viewIssues = {
+          ...this.viewIssues,
+          [type]: response as IIssue[],
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/global-view/global_views.store.ts b/web/store/global-view/global_views.store.ts
new file mode 100644
index 000000000..c9915b8d8
--- /dev/null
+++ b/web/store/global-view/global_views.store.ts
@@ -0,0 +1,205 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService } from "services/project";
+import { WorkspaceService } from "services/workspace.service";
+// types
+import { RootStore } from "../root";
+import { IWorkspaceView } from "types/workspace-views";
+
+export interface IGlobalViewsStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  globalViewId: string | null;
+  globalViewsList: IWorkspaceView[] | null;
+  globalViewDetails: {
+    [viewId: string]: IWorkspaceView;
+  };
+
+  // actions
+  setGlobalViewId: (viewId: string) => void;
+
+  fetchAllGlobalViews: (workspaceSlug: string) => Promise<IWorkspaceView[]>;
+  fetchGlobalViewDetails: (workspaceSlug: string, viewId: string) => Promise<IWorkspaceView>;
+  createGlobalView: (workspaceSlug: string, data: Partial<IWorkspaceView>) => Promise<IWorkspaceView>;
+  updateGlobalView: (workspaceSlug: string, viewId: string, data: Partial<IWorkspaceView>) => Promise<IWorkspaceView>;
+  deleteGlobalView: (workspaceSlug: string, viewId: string) => Promise<any>;
+}
+
+export class GlobalViewsStore implements IGlobalViewsStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  globalViewId: string | null = null;
+  globalViewsList: IWorkspaceView[] | null = null;
+  globalViewDetails: { [viewId: string]: IWorkspaceView } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  workspaceService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      globalViewId: observable.ref,
+      globalViewsList: observable.ref,
+      globalViewDetails: observable.ref,
+
+      // actions
+      setGlobalViewId: action,
+
+      fetchAllGlobalViews: action,
+      fetchGlobalViewDetails: action,
+      createGlobalView: action,
+      updateGlobalView: action,
+      deleteGlobalView: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.projectService = new ProjectService();
+    this.workspaceService = new WorkspaceService();
+  }
+
+  setGlobalViewId = (viewId: string) => {
+    this.globalViewId = viewId;
+  };
+
+  fetchAllGlobalViews = async (workspaceSlug: string): Promise<IWorkspaceView[]> => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const response = await this.workspaceService.getAllViews(workspaceSlug);
+
+      runInAction(() => {
+        this.loader = false;
+        this.globalViewsList = response;
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  fetchGlobalViewDetails = async (workspaceSlug: string, viewId: string): Promise<IWorkspaceView> => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const response = await this.workspaceService.getViewDetails(workspaceSlug, viewId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.globalViewDetails = {
+          ...this.globalViewDetails,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  createGlobalView = async (workspaceSlug: string, data: Partial<IWorkspaceView>): Promise<IWorkspaceView> => {
+    try {
+      const response = await this.workspaceService.createView(workspaceSlug, data);
+
+      runInAction(() => {
+        this.globalViewsList = [response, ...(this.globalViewsList ?? [])];
+        this.globalViewDetails = {
+          ...this.globalViewDetails,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateGlobalView = async (
+    workspaceSlug: string,
+    viewId: string,
+    data: Partial<IWorkspaceView>
+  ): Promise<IWorkspaceView> => {
+    const viewToUpdate = { ...this.globalViewDetails[viewId], ...data };
+
+    try {
+      runInAction(() => {
+        this.globalViewsList = (this.globalViewsList ?? []).map((view) => {
+          if (view.id === viewId) return viewToUpdate;
+
+          return view;
+        });
+        this.globalViewDetails = {
+          ...this.globalViewDetails,
+          [viewId]: viewToUpdate,
+        };
+      });
+
+      const response = await this.workspaceService.updateView(workspaceSlug, viewId, data);
+
+      return response;
+    } catch (error) {
+      this.fetchGlobalViewDetails(workspaceSlug, viewId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  deleteGlobalView = async (workspaceSlug: string, viewId: string): Promise<any> => {
+    const newViewsList = (this.globalViewsList ?? []).filter((view) => view.id !== viewId);
+
+    try {
+      runInAction(() => {
+        this.globalViewsList = newViewsList;
+      });
+
+      await this.workspaceService.deleteView(workspaceSlug, viewId);
+    } catch (error) {
+      this.fetchAllGlobalViews(workspaceSlug);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/global-view/index.ts b/web/store/global-view/index.ts
new file mode 100644
index 000000000..6c62135db
--- /dev/null
+++ b/web/store/global-view/index.ts
@@ -0,0 +1,3 @@
+export * from "./global_view_filters.store";
+export * from "./global_view_issues.store";
+export * from "./global_views.store";
diff --git a/web/store/issue/index.ts b/web/store/issue/index.ts
new file mode 100644
index 000000000..27c613eb8
--- /dev/null
+++ b/web/store/issue/index.ts
@@ -0,0 +1,5 @@
+export * from "./issue_detail.store";
+export * from "./issue_draft.store";
+export * from "./issue_filters.store";
+export * from "./issue_kanban_view.store";
+export * from "./issue.store";
diff --git a/web/store/issue/issue.store.ts b/web/store/issue/issue.store.ts
new file mode 100644
index 000000000..dfef99dc4
--- /dev/null
+++ b/web/store/issue/issue.store.ts
@@ -0,0 +1,187 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { IssueService } from "services/issue";
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+
+export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped";
+export type IIssueGroupedStructure = { [group_id: string]: IIssue[] };
+export type IIssueGroupWithSubGroupsStructure = {
+  [group_id: string]: {
+    [sub_group_id: string]: IIssue[];
+  };
+};
+export type IIssueUnGroupedStructure = IIssue[];
+
+export interface IIssueStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issues: {
+    [project_id: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class IssueStore implements IIssueStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issues: {
+    [project_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+  // service
+  issueService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+    });
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueSubGroup
+        ? "groupWithSubGroups"
+        : "grouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const projectId: string | null = this.rootStore?.project?.projectId;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    return this.issues?.[projectId]?.[issueType] || null;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const projectId: string | null = issue?.project;
+    const issueType = this.getIssueType;
+    if (!projectId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [projectId]: { ...this.issues[projectId], [issueType]: issues } };
+    });
+  };
+
+  fetchIssues = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
+      this.rootStore.project.setProjectId(projectId);
+
+      const params = this.rootStore?.issueFilter?.appliedFilters;
+      const issueResponse = await this.issueService.getIssuesWithParams(workspaceSlug, projectId, params);
+
+      const issueType = this.getIssueType;
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [projectId]: {
+            ...this.issues[projectId],
+            [issueType]: issueResponse,
+          },
+        };
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+}
diff --git a/web/store/issue/issue_detail.store.ts b/web/store/issue/issue_detail.store.ts
new file mode 100644
index 000000000..650eaf99e
--- /dev/null
+++ b/web/store/issue/issue_detail.store.ts
@@ -0,0 +1,199 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// services
+import { IssueService } from "services/issue";
+// types
+import { RootStore } from "../root";
+import { IUser, IIssue } from "types";
+
+export type IPeekMode = "side" | "modal" | "full";
+
+export interface IIssueDetailStore {
+  loader: boolean;
+  error: any | null;
+
+  peekId: string | null;
+  peekMode: IPeekMode | null;
+
+  issues: {
+    [issueId: string]: IIssue;
+  };
+
+  setPeekId: (issueId: string | null) => void;
+  setPeekMode: (issueId: IPeekMode | null) => void;
+  // fetch issue details
+  fetchIssueDetails: (workspaceId: string, projectId: string, issueId: string) => void;
+  // creating issue
+  createIssue: (workspaceId: string, projectId: string, data: Partial<IIssue>, user: IUser) => void;
+  // updating issue
+  updateIssue: (workspaceId: string, projectId: string, issueId: string, data: Partial<IIssue>, user: IUser) => void;
+  // deleting issue
+  deleteIssue: (workspaceId: string, projectId: string, issueId: string, user: IUser) => void;
+}
+
+export class IssueDetailStore implements IIssueDetailStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  peekId: string | null = null;
+  peekMode: IPeekMode | null = null;
+
+  issues: {
+    [issueId: string]: IIssue;
+  } = {};
+
+  // root store
+  rootStore;
+  // service
+  issueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+
+      peekId: observable.ref,
+      peekMode: observable.ref,
+
+      issues: observable.ref,
+
+      setPeekId: action,
+      setPeekMode: action,
+
+      fetchIssueDetails: action,
+      createIssue: action,
+      updateIssue: action,
+      deleteIssue: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.issueService = new IssueService();
+  }
+
+  setPeekId = (issueId: string | null) => (this.peekId = issueId);
+
+  setPeekMode = (mode: IPeekMode | null) => (this.peekMode = mode);
+
+  fetchIssueDetails = async (workspaceId: string, projectId: string, issueId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const issueDetailsResponse = await this.issueService.retrieve(workspaceId, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [issueId]: issueDetailsResponse,
+        };
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      return error;
+    }
+  };
+
+  createIssue = async (workspaceId: string, projectId: string, data: Partial<IIssue>, user: IUser) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const response = await this.issueService.createIssues(workspaceId, projectId, data, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [response.id]: response,
+        };
+      });
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+
+  updateIssue = async (
+    workspaceId: string,
+    projectId: string,
+    issueId: string,
+    data: Partial<IIssue>,
+    user: IUser | undefined
+  ) => {
+    const newIssues = { ...this.issues };
+    newIssues[issueId] = {
+      ...newIssues[issueId],
+      ...data,
+    };
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+        this.issues = newIssues;
+      });
+
+      const response = await this.issueService.patchIssue(workspaceId, projectId, issueId, data, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+        this.issues = {
+          ...this.issues,
+          [issueId]: {
+            ...this.issues[issueId],
+            ...response,
+          },
+        };
+      });
+    } catch (error) {
+      this.fetchIssueDetails(workspaceId, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      return error;
+    }
+  };
+
+  deleteIssue = async (workspaceId: string, projectId: string, issueId: string, user: IUser) => {
+    const newIssues = { ...this.issues };
+    delete newIssues[issueId];
+
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+        this.issues = newIssues;
+      });
+
+      await this.issueService.deleteIssue(workspaceId, projectId, issueId, user);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      this.fetchIssueDetails(workspaceId, projectId, issueId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      return error;
+    }
+  };
+}
diff --git a/web/store/draft-issue.ts b/web/store/issue/issue_draft.store.ts
similarity index 76%
rename from web/store/draft-issue.ts
rename to web/store/issue/issue_draft.store.ts
index f4247c04d..815e58278 100644
--- a/web/store/draft-issue.ts
+++ b/web/store/issue/issue_draft.store.ts
@@ -1,14 +1,15 @@
 // mobx
 import { action, observable, runInAction, makeAutoObservable } from "mobx";
 // services
-import issueService from "services/issues.service";
+import { IssueDraftService } from "services/issue";
 // types
-import type { ICurrentUserResponse, IIssue } from "types";
+import type { IIssue, IUser } from "types";
 
-class DraftIssuesStore {
+export class DraftIssuesStore {
   issues: { [key: string]: IIssue } = {};
   isIssuesLoading: boolean = false;
   rootStore: any | null = null;
+  issueDraftService;
 
   constructor(_rootStore: any | null = null) {
     makeAutoObservable(this, {
@@ -23,6 +24,7 @@ class DraftIssuesStore {
     });
 
     this.rootStore = _rootStore;
+    this.issueDraftService = new IssueDraftService();
   }
 
   /**
@@ -32,7 +34,7 @@ class DraftIssuesStore {
   loadDraftIssues = async (workspaceSlug: string, projectId: string, params?: any) => {
     this.isIssuesLoading = true;
     try {
-      const issuesResponse = await issueService.getDraftIssues(workspaceSlug, projectId, params);
+      const issuesResponse = await this.issueDraftService.getDraftIssues(workspaceSlug, projectId, params);
 
       const issues = Array.isArray(issuesResponse) ? { allIssues: issuesResponse } : issuesResponse;
 
@@ -54,19 +56,11 @@ class DraftIssuesStore {
    * @returns {IIssue}
    */
 
-  getIssueById = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<IIssue> => {
+  getIssueById = async (workspaceSlug: string, projectId: string, issueId: string): Promise<IIssue> => {
     if (this.issues[issueId]) return this.issues[issueId];
 
     try {
-      const issueResponse: IIssue = await issueService.getDraftIssueById(
-        workspaceSlug,
-        projectId,
-        issueId
-      );
+      const issueResponse: IIssue = await this.issueDraftService.getDraftIssueById(workspaceSlug, projectId, issueId);
 
       const issues = {
         ...this.issues,
@@ -96,15 +90,10 @@ class DraftIssuesStore {
     workspaceSlug: string,
     projectId: string,
     issueForm: IIssue,
-    user: ICurrentUserResponse
+    user: IUser
   ): Promise<IIssue> => {
     try {
-      const issueResponse = await issueService.createDraftIssue(
-        workspaceSlug,
-        projectId,
-        issueForm,
-        user
-      );
+      const issueResponse = await this.issueDraftService.createDraftIssue(workspaceSlug, projectId, issueForm);
 
       const issues = {
         ...this.issues,
@@ -126,7 +115,7 @@ class DraftIssuesStore {
     projectId: string,
     issueId: string,
     issueForm: Partial<IIssue>,
-    user: ICurrentUserResponse
+    user: IUser
   ) => {
     // keep a copy of the issue in the store
     const originalIssue = { ...this.issues[issueId] };
@@ -141,12 +130,11 @@ class DraftIssuesStore {
       });
 
       // make a patch request to update the issue
-      const issueResponse: IIssue = await issueService.updateDraftIssue(
+      const issueResponse: IIssue = await this.issueDraftService.updateDraftIssue(
         workspaceSlug,
         projectId,
         issueId,
-        issueForm,
-        user
+        issueForm
       );
 
       const updatedIssues = { ...this.issues };
@@ -165,12 +153,7 @@ class DraftIssuesStore {
     }
   };
 
-  deleteDraftIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    user: ICurrentUserResponse
-  ) => {
+  deleteDraftIssue = async (workspaceSlug: string, projectId: string, issueId: string, user: IUser) => {
     const issues = { ...this.issues };
     delete issues[issueId];
 
@@ -179,11 +162,9 @@ class DraftIssuesStore {
         this.issues = issues;
       });
 
-      issueService.deleteDraftIssue(workspaceSlug, projectId, issueId, user);
+      this.issueDraftService.deleteDraftIssue(workspaceSlug, projectId, issueId);
     } catch (error) {
       console.error("Deleting issue error", error);
     }
   };
 }
-
-export default DraftIssuesStore;
diff --git a/web/store/issue/issue_filters.store.ts b/web/store/issue/issue_filters.store.ts
new file mode 100644
index 000000000..0a96db887
--- /dev/null
+++ b/web/store/issue/issue_filters.store.ts
@@ -0,0 +1,231 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService } from "services/project";
+import { IssueService } from "services/issue";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  IProjectViewProps,
+  TIssueParams,
+} from "types";
+
+export interface IIssueFilterStore {
+  loader: boolean;
+  error: any | null;
+  userDisplayProperties: IIssueDisplayProperties;
+  userDisplayFilters: IIssueDisplayFilterOptions;
+  userFilters: IIssueFilterOptions;
+  defaultDisplayFilters: IIssueDisplayFilterOptions;
+  defaultFilters: IIssueFilterOptions;
+
+  // action
+  fetchUserProjectFilters: (workspaceSlug: string, projectId: string) => Promise<void>;
+  updateUserFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    filterToUpdate: Partial<IProjectViewProps>
+  ) => Promise<void>;
+  updateDisplayProperties: (
+    workspaceSlug: string,
+    projectId: string,
+    properties: Partial<IIssueDisplayProperties>
+  ) => Promise<void>;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class IssueFilterStore implements IIssueFilterStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  userDisplayProperties: any = {};
+  userDisplayFilters: IIssueDisplayFilterOptions = {};
+  userFilters: IIssueFilterOptions = {};
+  defaultDisplayFilters: IIssueDisplayFilterOptions = {};
+  defaultFilters: IIssueFilterOptions = {};
+  defaultDisplayProperties: IIssueDisplayProperties = {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    labels: true,
+    key: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    link: true,
+    attachment_count: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  };
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  issueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      defaultDisplayFilters: observable.ref,
+      defaultFilters: observable.ref,
+      userDisplayProperties: observable.ref,
+      userDisplayFilters: observable.ref,
+      userFilters: observable.ref,
+
+      // actions
+      fetchUserProjectFilters: action,
+      updateUserFilters: action,
+      updateDisplayProperties: action,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.projectService = new ProjectService();
+    this.issueService = new IssueService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    if (!this.userFilters || !this.userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.userFilters?.priority || undefined,
+      state_group: this.userFilters?.state_group || undefined,
+      state: this.userFilters?.state || undefined,
+      assignees: this.userFilters?.assignees || undefined,
+      created_by: this.userFilters?.created_by || undefined,
+      labels: this.userFilters?.labels || undefined,
+      start_date: this.userFilters?.start_date || undefined,
+      target_date: this.userFilters?.target_date || undefined,
+      group_by: this.userDisplayFilters?.group_by || "state",
+      order_by: this.userDisplayFilters?.order_by || "-created_at",
+      sub_group_by: this.userDisplayFilters?.sub_group_by || undefined,
+      type: this.userDisplayFilters?.type || undefined,
+      sub_issue: this.userDisplayFilters?.sub_issue || true,
+      show_empty_groups: this.userDisplayFilters?.show_empty_groups || true,
+      start_target_date: this.userDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(this.userDisplayFilters.layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (this.userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (this.userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+
+  fetchUserProjectFilters = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const memberResponse = await this.projectService.projectMemberMe(workspaceSlug, projectId);
+      const issueProperties = await this.issueService.getIssueProperties(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.userFilters = memberResponse?.view_props?.filters;
+        this.userDisplayFilters = memberResponse?.view_props?.display_filters ?? {};
+        this.userDisplayProperties = issueProperties?.properties || this.defaultDisplayProperties;
+        // default props from api
+        this.defaultFilters = memberResponse.default_props.filters;
+        this.defaultDisplayFilters = memberResponse.default_props.display_filters ?? {};
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to fetch user filters in issue filter store", error);
+    }
+  };
+
+  updateUserFilters = async (workspaceSlug: string, projectId: string, filterToUpdate: Partial<IProjectViewProps>) => {
+    const newViewProps = {
+      display_filters: {
+        ...this.userDisplayFilters,
+        ...filterToUpdate.display_filters,
+      },
+      filters: {
+        ...this.userFilters,
+        ...filterToUpdate.filters,
+      },
+    };
+
+    // set sub_group_by to null if group_by is set to null
+    if (newViewProps.display_filters.group_by === null) newViewProps.display_filters.sub_group_by = null;
+
+    // set group_by to state if layout is switched to kanban and group_by is null
+    if (newViewProps.display_filters.layout === "kanban" && newViewProps.display_filters.group_by === null)
+      newViewProps.display_filters.group_by = "state";
+
+    try {
+      runInAction(() => {
+        this.userFilters = newViewProps.filters;
+        this.userDisplayFilters = newViewProps.display_filters;
+      });
+
+      this.projectService.setProjectView(workspaceSlug, projectId, {
+        view_props: newViewProps,
+      });
+    } catch (error) {
+      this.fetchUserProjectFilters(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user filters in issue filter store", error);
+    }
+  };
+
+  updateDisplayProperties = async (
+    workspaceSlug: string,
+    projectId: string,
+    properties: Partial<IIssueDisplayProperties>
+  ) => {
+    const newProperties = {
+      ...this.userDisplayProperties,
+      ...properties,
+    };
+
+    try {
+      runInAction(() => {
+        this.userDisplayProperties = newProperties;
+      });
+
+      // await this.issueService.patchIssueProperties(workspaceSlug, projectId, newProperties);
+    } catch (error) {
+      this.fetchUserProjectFilters(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user filters in issue filter store", error);
+    }
+  };
+}
diff --git a/web/store/issue/issue_kanban_view.store.ts b/web/store/issue/issue_kanban_view.store.ts
new file mode 100644
index 000000000..d1f07352f
--- /dev/null
+++ b/web/store/issue/issue_kanban_view.store.ts
@@ -0,0 +1,450 @@
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "./issue.store";
+import { IUser } from "types";
+
+export interface IIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  };
+  // computed
+  canUserDragDrop: boolean;
+  canUserDragDropVertically: boolean;
+  canUserDragDropHorizontally: boolean;
+  // actions
+  handleKanBanToggle: (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => void;
+  handleSwimlaneDragDrop: (source: any, destination: any) => void;
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class IssueKanBanViewStore implements IIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  } = { groupByHeaderMinMax: [], subgroupByIssuesVisibility: [] };
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      kanBanToggle: observable,
+      // computed
+      canUserDragDrop: computed,
+      canUserDragDropVertically: computed,
+      canUserDragDropHorizontally: computed,
+
+      // actions
+      handleKanBanToggle: action,
+      handleSwimlaneDragDrop: action,
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  get canUserDragDrop() {
+    if (
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by === "sort_order" &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.group_by &&
+      ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.group_by)
+    ) {
+      if (!this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by) return true;
+      if (
+        this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by &&
+        ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by)
+      )
+        return true;
+    }
+    return false;
+  }
+
+  get canUserDragDropVertically() {
+    return false;
+  }
+
+  get canUserDragDropHorizontally() {
+    return false;
+  }
+
+  handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    this.kanBanToggle = {
+      ...this.kanBanToggle,
+      [toggle]: this.kanBanToggle[toggle].includes(value)
+        ? this.kanBanToggle[toggle].filter((v) => v !== value)
+        : [...this.kanBanToggle[toggle], value],
+    };
+  };
+
+  handleSwimlaneDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.issue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source.droppableId;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination.droppableId;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const source_sub_group_id: string = droppableSourceColumnId[1] === "null" ? null : droppableSourceColumnId[1];
+
+      const destination_group_id: string = droppableDestinationColumnId[0];
+      const destination_sub_group_id: string =
+        droppableDestinationColumnId[1] === "null" ? null : droppableDestinationColumnId[1];
+
+      if (source_sub_group_id === destination_sub_group_id) {
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_sub_group_id][source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_sub_group_id][source_group_id] = _issues;
+        }
+
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+          let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+          currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+        }
+      }
+
+      if (source_sub_group_id != destination_sub_group_id) {
+        const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+        let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+        if (_destinationIssues && _destinationIssues.length > 0) {
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _destinationIssues.length) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order:
+                (_destinationIssues[destination.index - 1].sort_order +
+                  _destinationIssues[destination.index].sort_order) /
+                2,
+            };
+          }
+        } else {
+          updateIssue = {
+            ...updateIssue,
+            sort_order: sortOrderDefaultValue,
+          };
+        }
+
+        let issueStatePriority = {};
+        if (source_group_id === destination_group_id) {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_sub_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_sub_group_id };
+          }
+        } else {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id, priority: destination_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_sub_group_id,
+              priority: destination_group_id,
+            };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, state: destination_group_id, priority: destination_sub_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_group_id,
+              priority: destination_sub_group_id,
+            };
+          }
+        }
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            sort_order: updateIssue.sort_order,
+            ...issueStatePriority,
+          });
+        else
+          _destinationIssues = [
+            ..._destinationIssues,
+            { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+          ];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id };
+        currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+        currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.issue.issues,
+        [projectId]: {
+          ...this.rootStore?.issue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.issue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.issue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue,
+        {} as IUser
+      );
+    }
+  };
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.issue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source.droppableId;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination.droppableId;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const destination_group_id: string = droppableDestinationColumnId[0];
+
+      if (this.canUserDragDrop) {
+        // vertical
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_group_id] = _issues;
+        }
+
+        // horizontal
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_group_id];
+          let _destinationIssues = currentIssues[destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_group_id] = _sourceIssues;
+          currentIssues[destination_group_id] = _destinationIssues;
+        }
+      }
+
+      // user can drag the issues only vertically
+      if (this.canUserDragDropVertically && destination_group_id === destination_group_id) {
+      }
+
+      // user can drag the issues only horizontally
+      if (this.canUserDragDropHorizontally && destination_group_id != destination_group_id) {
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.issue.issues,
+        [projectId]: {
+          ...this.rootStore?.issue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.issue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.issue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue,
+        {} as IUser
+      );
+    }
+  };
+}
diff --git a/web/store/issues.ts b/web/store/issues.ts
deleted file mode 100644
index 286d98534..000000000
--- a/web/store/issues.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-// mobx
-import { action, observable, runInAction, makeAutoObservable } from "mobx";
-// services
-import issueService from "services/issues.service";
-// types
-import type { ICurrentUserResponse, IIssue } from "types";
-
-class IssuesStore {
-  issues: { [key: string]: IIssue } = {};
-  isIssuesLoading: boolean = false;
-  rootStore: any | null = null;
-
-  constructor(_rootStore: any | null = null) {
-    makeAutoObservable(this, {
-      issues: observable.ref,
-      loadIssues: action,
-      getIssueById: action,
-      isIssuesLoading: observable,
-      createIssue: action,
-      updateIssue: action,
-      deleteIssue: action,
-    });
-
-    this.rootStore = _rootStore;
-  }
-
-  /**
-   * @description Fetch all issues of a project and hydrate issues field
-   */
-
-  loadIssues = async (workspaceSlug: string, projectId: string) => {
-    this.isIssuesLoading = true;
-    try {
-      const issuesResponse: IIssue[] = (await issueService.getIssuesWithParams(
-        workspaceSlug,
-        projectId
-      )) as IIssue[];
-
-      const issues: { [kye: string]: IIssue } = {};
-      issuesResponse.forEach((issue) => {
-        issues[issue.id] = issue;
-      });
-
-      runInAction(() => {
-        this.issues = issues;
-        this.isIssuesLoading = false;
-      });
-    } catch (error) {
-      this.isIssuesLoading = false;
-      console.error("Fetching issues error", error);
-    }
-  };
-
-  getIssueById = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string
-  ): Promise<IIssue> => {
-    if (this.issues[issueId]) return this.issues[issueId];
-
-    try {
-      const issueResponse: IIssue = await issueService.retrieve(workspaceSlug, projectId, issueId);
-
-      const issues = {
-        ...this.issues,
-        [issueId]: { ...issueResponse },
-      };
-
-      runInAction(() => {
-        this.issues = issues;
-      });
-
-      return issueResponse;
-    } catch (error) {
-      throw error;
-    }
-  };
-
-  createIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueForm: IIssue,
-    user: ICurrentUserResponse
-  ): Promise<IIssue> => {
-    try {
-      const issueResponse = await issueService.createIssues(
-        workspaceSlug,
-        projectId,
-        issueForm,
-        user
-      );
-
-      const issues = {
-        ...this.issues,
-        [issueResponse.id]: { ...issueResponse },
-      };
-
-      runInAction(() => {
-        this.issues = issues;
-      });
-      return issueResponse;
-    } catch (error) {
-      console.error("Creating issue error", error);
-      throw error;
-    }
-  };
-
-  updateIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    issueForm: Partial<IIssue>,
-    user: ICurrentUserResponse
-  ) => {
-    // keep a copy of the issue in the store
-    const originalIssue = { ...this.issues[issueId] };
-
-    // immediately update the issue in the store
-    const updatedIssue = { ...this.issues[issueId], ...issueForm };
-    if (updatedIssue.assignees_list) updatedIssue.assignees = updatedIssue.assignees_list;
-
-    try {
-      runInAction(() => {
-        this.issues[issueId] = { ...updatedIssue };
-      });
-
-      // make a patch request to update the issue
-      const issueResponse: IIssue = await issueService.patchIssue(
-        workspaceSlug,
-        projectId,
-        issueId,
-        issueForm,
-        user
-      );
-
-      const updatedIssues = { ...this.issues };
-      updatedIssues[issueId] = { ...issueResponse };
-
-      runInAction(() => {
-        this.issues = updatedIssues;
-      });
-    } catch (error) {
-      // if there is an error, revert the changes
-      runInAction(() => {
-        this.issues[issueId] = originalIssue;
-      });
-
-      return error;
-    }
-  };
-
-  deleteIssue = async (
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    user: ICurrentUserResponse
-  ) => {
-    const issues = { ...this.issues };
-    delete issues[issueId];
-
-    try {
-      runInAction(() => {
-        this.issues = issues;
-      });
-
-      issueService.deleteIssue(workspaceSlug, projectId, issueId, user);
-    } catch (error) {
-      console.error("Deleting issue error", error);
-    }
-  };
-}
-
-export default IssuesStore;
diff --git a/web/store/module/index.ts b/web/store/module/index.ts
new file mode 100644
index 000000000..4f2bc1027
--- /dev/null
+++ b/web/store/module/index.ts
@@ -0,0 +1,4 @@
+export * from "./module_filters.store";
+export * from "./module_issue_kanban_view.store";
+export * from "./module_issue.store";
+export * from "./modules.store";
diff --git a/web/store/module/module_filters.store.ts b/web/store/module/module_filters.store.ts
new file mode 100644
index 000000000..66ecb7278
--- /dev/null
+++ b/web/store/module/module_filters.store.ts
@@ -0,0 +1,176 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService } from "services/project";
+import { ModuleService } from "services/module.service";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueFilterOptions, IModule, TIssueParams } from "types";
+
+export interface IModuleFilterStore {
+  loader: boolean;
+  error: any | null;
+  moduleFilters: IIssueFilterOptions;
+  defaultFilters: IIssueFilterOptions;
+
+  // action
+  fetchModuleFilters: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<IModule>;
+  updateModuleFilters: (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    filterToUpdate: Partial<IIssueFilterOptions>
+  ) => Promise<void>;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class ModuleFilterStore implements IModuleFilterStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  moduleFilters: IIssueFilterOptions = {};
+  defaultFilters: IIssueFilterOptions = {};
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  moduleService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      defaultFilters: observable.ref,
+      moduleFilters: observable.ref,
+
+      // actions
+      fetchModuleFilters: action,
+      updateModuleFilters: action,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.projectService = new ProjectService();
+    this.moduleService = new ModuleService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    const userDisplayFilters = this.rootStore.issueFilter.userDisplayFilters;
+
+    if (!this.moduleFilters || !userDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.moduleFilters?.priority || undefined,
+      state_group: this.moduleFilters?.state_group || undefined,
+      state: this.moduleFilters?.state || undefined,
+      assignees: this.moduleFilters?.assignees || undefined,
+      created_by: this.moduleFilters?.created_by || undefined,
+      labels: this.moduleFilters?.labels || undefined,
+      start_date: this.moduleFilters?.start_date || undefined,
+      target_date: this.moduleFilters?.target_date || undefined,
+      group_by: userDisplayFilters?.group_by || "state",
+      order_by: userDisplayFilters?.order_by || "-created_at",
+      sub_group_by: userDisplayFilters?.sub_group_by || undefined,
+      type: userDisplayFilters?.type || undefined,
+      sub_issue: userDisplayFilters?.sub_issue || true,
+      show_empty_groups: userDisplayFilters?.show_empty_groups || true,
+      start_target_date: userDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(userDisplayFilters.layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (userDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (userDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+
+  fetchModuleFilters = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const response = await this.moduleService.getModuleDetails(workspaceSlug, projectId, moduleId);
+
+      runInAction(() => {
+        this.moduleFilters = response.view_props?.filters ?? {};
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      console.error("Failed to fetch module details in module store", error);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateModuleFilters = async (
+    workspaceSlug: string,
+    projectId: string,
+    moduleId: string,
+    filterToUpdate: Partial<IIssueFilterOptions>
+  ) => {
+    const newFilters = {
+      ...this.moduleFilters,
+      ...filterToUpdate,
+    };
+
+    try {
+      runInAction(() => {
+        this.moduleFilters = newFilters;
+      });
+
+      this.moduleService.patchModule(
+        workspaceSlug,
+        projectId,
+        moduleId,
+        {
+          view_props: {
+            filters: newFilters,
+          },
+        },
+        this.rootStore.user.currentUser
+      );
+    } catch (error) {
+      this.fetchModuleFilters(workspaceSlug, projectId, moduleId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user filters in issue filter store", error);
+    }
+  };
+}
diff --git a/web/store/module/module_issue.store.ts b/web/store/module/module_issue.store.ts
new file mode 100644
index 000000000..3d59fd5ec
--- /dev/null
+++ b/web/store/module/module_issue.store.ts
@@ -0,0 +1,195 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// store
+import { RootStore } from "../root";
+// types
+import { IIssue } from "types";
+// services
+import { ModuleService } from "services/module.service";
+// helpers
+import { sortArrayByDate, sortArrayByPriority } from "constants/kanban-helpers";
+
+export type IIssueType = "grouped" | "groupWithSubGroups" | "ungrouped";
+export type IIssueGroupedStructure = { [group_id: string]: IIssue[] };
+export type IIssueGroupWithSubGroupsStructure = {
+  [group_id: string]: {
+    [sub_group_id: string]: IIssue[];
+  };
+};
+export type IIssueUnGroupedStructure = IIssue[];
+
+export interface IModuleIssueStore {
+  loader: boolean;
+  error: any | null;
+  // issues
+  issues: {
+    [module_id: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+  // computed
+  getIssueType: IIssueType | null;
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+  // action
+  fetchIssues: (workspaceSlug: string, projectId: string, moduleId: string) => Promise<any>;
+  updateIssueStructure: (group_id: string | null, sub_group_id: string | null, issue: IIssue) => void;
+}
+
+export class ModuleIssueStore implements IModuleIssueStore {
+  loader: boolean = false;
+  error: any | null = null;
+  issues: {
+    [module_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+  // service
+  moduleService;
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      error: observable.ref,
+      issues: observable.ref,
+      // computed
+      getIssueType: computed,
+      getIssues: computed,
+      // actions
+      fetchIssues: action,
+      updateIssueStructure: action,
+    });
+    this.rootStore = _rootStore;
+    this.moduleService = new ModuleService();
+  }
+
+  get getIssueType() {
+    const groupedLayouts = ["kanban", "list", "calendar"];
+    const ungroupedLayouts = ["spreadsheet", "gantt_chart"];
+
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const issueSubGroup = this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by || null;
+
+    if (!issueLayout) return null;
+
+    const _issueState = groupedLayouts.includes(issueLayout)
+      ? issueSubGroup
+        ? "groupWithSubGroups"
+        : "grouped"
+      : ungroupedLayouts.includes(issueLayout)
+      ? "ungrouped"
+      : null;
+
+    return _issueState || null;
+  }
+
+  get getIssues() {
+    const moduleId: string | null = this.rootStore?.module?.moduleId;
+    const issueType = this.getIssueType;
+    if (!moduleId || !issueType) return null;
+
+    return this.issues?.[moduleId]?.[issueType] || null;
+  }
+
+  updateIssueStructure = async (group_id: string | null, sub_group_id: string | null, issue: IIssue) => {
+    const moduleId: string | null = this.rootStore?.module?.moduleId;
+    const issueType = this.getIssueType;
+    if (!moduleId || !issueType) return null;
+
+    let issues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null =
+      this.getIssues;
+    if (!issues) return null;
+
+    if (issueType === "grouped" && group_id) {
+      issues = issues as IIssueGroupedStructure;
+      issues = {
+        ...issues,
+        [group_id]: issues[group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+      };
+    }
+    if (issueType === "groupWithSubGroups" && group_id && sub_group_id) {
+      issues = issues as IIssueGroupWithSubGroupsStructure;
+      issues = {
+        ...issues,
+        [sub_group_id]: {
+          ...issues[sub_group_id],
+          [group_id]: issues[sub_group_id][group_id].map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i)),
+        },
+      };
+    }
+    if (issueType === "ungrouped") {
+      issues = issues as IIssueUnGroupedStructure;
+      issues = issues.map((i: IIssue) => (i?.id === issue?.id ? { ...i, ...issue } : i));
+    }
+
+    const orderBy = this.rootStore?.issueFilter?.userDisplayFilters?.order_by || "";
+    if (orderBy === "-created_at") {
+      issues = sortArrayByDate(issues as any, "created_at");
+    }
+    if (orderBy === "-updated_at") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "start_date") {
+      issues = sortArrayByDate(issues as any, "updated_at");
+    }
+    if (orderBy === "priority") {
+      issues = sortArrayByPriority(issues as any, "priority");
+    }
+
+    runInAction(() => {
+      this.issues = { ...this.issues, [moduleId]: { ...this.issues[moduleId], [issueType]: issues } };
+    });
+  };
+
+  fetchIssues = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      this.rootStore.workspace.setWorkspaceSlug(workspaceSlug);
+      this.rootStore.project.setProjectId(projectId);
+      this.rootStore.module.setModuleId(moduleId);
+
+      const params = this.rootStore?.cycleIssueFilter?.appliedFilters;
+      const issueResponse = await this.moduleService.getModuleIssuesWithParams(
+        workspaceSlug,
+        projectId,
+        moduleId,
+        params
+      );
+
+      const issueType = this.getIssueType;
+      if (issueType != null) {
+        const _issues = {
+          ...this.issues,
+          [moduleId]: {
+            ...this.issues[moduleId],
+            [issueType]: issueResponse,
+          },
+        };
+        runInAction(() => {
+          this.issues = _issues;
+          this.loader = false;
+          this.error = null;
+        });
+      }
+
+      return issueResponse;
+    } catch (error) {
+      console.error("Error: Fetching error in issues", error);
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+}
diff --git a/web/store/module/module_issue_kanban_view.store.ts b/web/store/module/module_issue_kanban_view.store.ts
new file mode 100644
index 000000000..7061316f3
--- /dev/null
+++ b/web/store/module/module_issue_kanban_view.store.ts
@@ -0,0 +1,450 @@
+import { action, computed, makeObservable, observable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueType } from "../issue/issue.store";
+import { IUser } from "types";
+
+export interface IModuleIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  };
+  // computed
+  canUserDragDrop: boolean;
+  canUserDragDropVertically: boolean;
+  canUserDragDropHorizontally: boolean;
+  // actions
+  handleKanBanToggle: (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => void;
+  handleSwimlaneDragDrop: (source: any, destination: any) => void;
+  handleDragDrop: (source: any, destination: any) => void;
+}
+
+export class ModuleIssueKanBanViewStore implements IModuleIssueKanBanViewStore {
+  kanBanToggle: {
+    groupByHeaderMinMax: string[];
+    subgroupByIssuesVisibility: string[];
+  } = { groupByHeaderMinMax: [], subgroupByIssuesVisibility: [] };
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      kanBanToggle: observable,
+      // computed
+      canUserDragDrop: computed,
+      canUserDragDropVertically: computed,
+      canUserDragDropHorizontally: computed,
+
+      // actions
+      handleKanBanToggle: action,
+      handleSwimlaneDragDrop: action,
+      handleDragDrop: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  get canUserDragDrop() {
+    if (
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.order_by === "sort_order" &&
+      this.rootStore?.issueFilter?.userDisplayFilters?.group_by &&
+      ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.group_by)
+    ) {
+      if (!this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by) return true;
+      if (
+        this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by &&
+        ["state", "priority"].includes(this.rootStore?.issueFilter?.userDisplayFilters?.sub_group_by)
+      )
+        return true;
+    }
+    return false;
+  }
+
+  get canUserDragDropVertically() {
+    return false;
+  }
+
+  get canUserDragDropHorizontally() {
+    return false;
+  }
+
+  handleKanBanToggle = (toggle: "groupByHeaderMinMax" | "subgroupByIssuesVisibility", value: string) => {
+    this.kanBanToggle = {
+      ...this.kanBanToggle,
+      [toggle]: this.kanBanToggle[toggle].includes(value)
+        ? this.kanBanToggle[toggle].filter((v) => v !== value)
+        : [...this.kanBanToggle[toggle], value],
+    };
+  };
+
+  handleSwimlaneDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.moduleIssue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source.droppableId;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination.droppableId;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const source_sub_group_id: string = droppableSourceColumnId[1] === "null" ? null : droppableSourceColumnId[1];
+
+      const destination_group_id: string = droppableDestinationColumnId[0];
+      const destination_sub_group_id: string =
+        droppableDestinationColumnId[1] === "null" ? null : droppableDestinationColumnId[1];
+
+      if (source_sub_group_id === destination_sub_group_id) {
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_sub_group_id][source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_sub_group_id][source_group_id] = _issues;
+        }
+
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+          let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+          currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+        }
+      }
+
+      if (source_sub_group_id != destination_sub_group_id) {
+        const _sourceIssues = currentIssues[source_sub_group_id][source_group_id];
+        let _destinationIssues = currentIssues[destination_sub_group_id][destination_group_id] || [];
+
+        if (_destinationIssues && _destinationIssues.length > 0) {
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _destinationIssues.length) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order:
+                (_destinationIssues[destination.index - 1].sort_order +
+                  _destinationIssues[destination.index].sort_order) /
+                2,
+            };
+          }
+        } else {
+          updateIssue = {
+            ...updateIssue,
+            sort_order: sortOrderDefaultValue,
+          };
+        }
+
+        let issueStatePriority = {};
+        if (source_group_id === destination_group_id) {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_sub_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_sub_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_sub_group_id };
+          }
+        } else {
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_sub_group_id, priority: destination_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_sub_group_id,
+              priority: destination_group_id,
+            };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.sub_group_by === "priority") {
+            updateIssue = { ...updateIssue, state: destination_group_id, priority: destination_sub_group_id };
+            issueStatePriority = {
+              ...issueStatePriority,
+              state: destination_group_id,
+              priority: destination_sub_group_id,
+            };
+          }
+        }
+
+        const [removed] = _sourceIssues.splice(source.index, 1);
+        if (_destinationIssues && _destinationIssues.length > 0)
+          _destinationIssues.splice(destination.index, 0, {
+            ...removed,
+            sort_order: updateIssue.sort_order,
+            ...issueStatePriority,
+          });
+        else
+          _destinationIssues = [
+            ..._destinationIssues,
+            { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+          ];
+
+        updateIssue = { ...updateIssue, issueId: removed?.id };
+        currentIssues[source_sub_group_id][source_group_id] = _sourceIssues;
+        currentIssues[destination_sub_group_id][destination_group_id] = _destinationIssues;
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.moduleIssue.issues,
+        [projectId]: {
+          ...this.rootStore?.moduleIssue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.moduleIssue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.moduleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue,
+        this.rootStore.user.currentUser as IUser
+      );
+    }
+  };
+
+  handleDragDrop = async (source: any, destination: any) => {
+    const workspaceSlug = this.rootStore?.workspace?.workspaceSlug;
+    const projectId = this.rootStore?.project?.projectId;
+    const issueType: IIssueType | null = this.rootStore?.issue?.getIssueType;
+    const issueLayout = this.rootStore?.issueFilter?.userDisplayFilters?.layout || null;
+    const currentIssues: any = this.rootStore.moduleIssue.getIssues;
+
+    const sortOrderDefaultValue = 65535;
+
+    if (workspaceSlug && projectId && issueType && issueLayout === "kanban" && currentIssues) {
+      // update issue payload
+      let updateIssue: any = {
+        workspaceSlug: workspaceSlug,
+        projectId: projectId,
+      };
+
+      // source, destination group and sub group id
+      let droppableSourceColumnId = source.droppableId;
+      droppableSourceColumnId = droppableSourceColumnId ? droppableSourceColumnId.split("__") : null;
+      let droppableDestinationColumnId = destination.droppableId;
+      droppableDestinationColumnId = droppableDestinationColumnId ? droppableDestinationColumnId.split("__") : null;
+      if (!droppableSourceColumnId || !droppableDestinationColumnId) return null;
+
+      const source_group_id: string = droppableSourceColumnId[0];
+      const destination_group_id: string = droppableDestinationColumnId[0];
+
+      if (this.canUserDragDrop) {
+        // vertical
+        if (source_group_id === destination_group_id) {
+          const _issues = currentIssues[source_group_id];
+
+          // update the sort order
+          if (destination.index === 0) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order - sortOrderDefaultValue,
+            };
+          } else if (destination.index === _issues.length - 1) {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: _issues[destination.index].sort_order + sortOrderDefaultValue,
+            };
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: (_issues[destination.index - 1].sort_order + _issues[destination.index].sort_order) / 2,
+            };
+          }
+
+          const [removed] = _issues.splice(source.index, 1);
+          _issues.splice(destination.index, 0, { ...removed, sort_order: updateIssue.sort_order });
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+          currentIssues[source_group_id] = _issues;
+        }
+
+        // horizontal
+        if (source_group_id != destination_group_id) {
+          const _sourceIssues = currentIssues[source_group_id];
+          let _destinationIssues = currentIssues[destination_group_id] || [];
+
+          if (_destinationIssues && _destinationIssues.length > 0) {
+            if (destination.index === 0) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index].sort_order - sortOrderDefaultValue,
+              };
+            } else if (destination.index === _destinationIssues.length) {
+              updateIssue = {
+                ...updateIssue,
+                sort_order: _destinationIssues[destination.index - 1].sort_order + sortOrderDefaultValue,
+              };
+            } else {
+              updateIssue = {
+                ...updateIssue,
+                sort_order:
+                  (_destinationIssues[destination.index - 1].sort_order +
+                    _destinationIssues[destination.index].sort_order) /
+                  2,
+              };
+            }
+          } else {
+            updateIssue = {
+              ...updateIssue,
+              sort_order: sortOrderDefaultValue,
+            };
+          }
+
+          let issueStatePriority = {};
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "state") {
+            updateIssue = { ...updateIssue, state: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, state: destination_group_id };
+          }
+          if (this.rootStore.issueFilter?.userDisplayFilters?.group_by === "priority") {
+            updateIssue = { ...updateIssue, priority: destination_group_id };
+            issueStatePriority = { ...issueStatePriority, priority: destination_group_id };
+          }
+
+          const [removed] = _sourceIssues.splice(source.index, 1);
+          if (_destinationIssues && _destinationIssues.length > 0)
+            _destinationIssues.splice(destination.index, 0, {
+              ...removed,
+              sort_order: updateIssue.sort_order,
+              ...issueStatePriority,
+            });
+          else
+            _destinationIssues = [
+              ..._destinationIssues,
+              { ...removed, sort_order: updateIssue.sort_order, ...issueStatePriority },
+            ];
+          updateIssue = { ...updateIssue, issueId: removed?.id };
+
+          currentIssues[source_group_id] = _sourceIssues;
+          currentIssues[destination_group_id] = _destinationIssues;
+        }
+      }
+
+      // user can drag the issues only vertically
+      if (this.canUserDragDropVertically && destination_group_id === destination_group_id) {
+      }
+
+      // user can drag the issues only horizontally
+      if (this.canUserDragDropHorizontally && destination_group_id != destination_group_id) {
+      }
+
+      const reorderedIssues = {
+        ...this.rootStore?.moduleIssue.issues,
+        [projectId]: {
+          ...this.rootStore?.moduleIssue.issues?.[projectId],
+          [issueType]: {
+            ...this.rootStore?.moduleIssue.issues?.[projectId]?.[issueType],
+            [issueType]: currentIssues,
+          },
+        },
+      };
+
+      runInAction(() => {
+        this.rootStore.moduleIssue.issues = { ...reorderedIssues };
+      });
+
+      this.rootStore.issueDetail?.updateIssue(
+        updateIssue.workspaceSlug,
+        updateIssue.projectId,
+        updateIssue.issueId,
+        updateIssue,
+        this.rootStore.user.currentUser as IUser
+      );
+    }
+  };
+}
diff --git a/web/store/module/modules.store.ts b/web/store/module/modules.store.ts
new file mode 100644
index 000000000..f73b5952f
--- /dev/null
+++ b/web/store/module/modules.store.ts
@@ -0,0 +1,335 @@
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+// services
+import { ProjectService } from "services/project";
+import { ModuleService } from "services/module.service";
+// types
+import { RootStore } from "../root";
+import { IIssue, IModule } from "types";
+import {
+  IIssueGroupWithSubGroupsStructure,
+  IIssueGroupedStructure,
+  IIssueUnGroupedStructure,
+} from "../issue/issue.store";
+
+export interface IModuleStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  moduleId: string | null;
+  modules: {
+    [project_id: string]: IModule[];
+  };
+  moduleDetails: {
+    [module_id: string]: IModule;
+  };
+  issues: {
+    [module_id: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+
+  // actions
+  setModuleId: (moduleSlug: string) => void;
+
+  getModuleById: (moduleId: string) => IModule | null;
+
+  fetchModules: (workspaceSlug: string, projectId: string) => void;
+  fetchModuleDetails: (workspaceSlug: string, projectId: string, moduleId: string) => void;
+
+  createModule: (workspaceSlug: string, projectId: string, data: Partial<IModule>) => Promise<IModule>;
+  updateModuleDetails: (workspaceSlug: string, projectId: string, moduleId: string, data: Partial<IModule>) => void;
+  deleteModule: (workspaceSlug: string, projectId: string, moduleId: string) => void;
+  addModuleToFavorites: (workspaceSlug: string, projectId: string, moduleId: string) => void;
+  removeModuleFromFavorites: (workspaceSlug: string, projectId: string, moduleId: string) => void;
+
+  // computed
+  projectModules: IModule[] | null;
+}
+
+export class ModuleStore implements IModuleStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  moduleId: string | null = null;
+  modules: {
+    [project_id: string]: IModule[];
+  } = {};
+  moduleDetails: {
+    [module_id: string]: IModule;
+  } = {};
+  issues: {
+    [module_id: string]: {
+      grouped: {
+        [group_id: string]: IIssue[];
+      };
+      groupWithSubGroups: {
+        [group_id: string]: {
+          [sub_group_id: string]: IIssue[];
+        };
+      };
+      ungrouped: IIssue[];
+    };
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  projectService;
+  moduleService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable,
+      error: observable.ref,
+
+      // observables
+      moduleId: observable.ref,
+      modules: observable.ref,
+      moduleDetails: observable.ref,
+      issues: observable.ref,
+
+      // actions
+      setModuleId: action,
+
+      getModuleById: action,
+
+      fetchModules: action,
+      fetchModuleDetails: action,
+
+      createModule: action,
+      updateModuleDetails: action,
+      deleteModule: action,
+      addModuleToFavorites: action,
+      removeModuleFromFavorites: action,
+
+      // computed
+      projectModules: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    // services
+    this.projectService = new ProjectService();
+    this.moduleService = new ModuleService();
+  }
+
+  // computed
+  get projectModules() {
+    if (!this.rootStore.project.projectId) return null;
+
+    return this.modules[this.rootStore.project.projectId] || null;
+  }
+
+  getModuleById = (moduleId: string) => this.moduleDetails[moduleId] || null;
+
+  // actions
+  setModuleId = (moduleSlug: string) => {
+    this.moduleId = moduleSlug ?? null;
+  };
+
+  fetchModules = async (workspaceSlug: string, projectId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const modulesResponse = await this.moduleService.getModules(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: modulesResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error("Failed to fetch modules list in module store", error);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+    }
+  };
+
+  fetchModuleDetails = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const response = await this.moduleService.getModuleDetails(workspaceSlug, projectId, moduleId);
+
+      if (!response) return null;
+
+      runInAction(() => {
+        this.moduleDetails = {
+          ...this.moduleDetails,
+          [moduleId]: response,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error("Failed to fetch module details in module store", error);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+    }
+  };
+
+  createModule = async (workspaceSlug: string, projectId: string, data: Partial<IModule>) => {
+    try {
+      const response = await this.moduleService.createModule(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser
+      );
+
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: [...this.modules[projectId], response],
+        };
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      console.error("Failed to create module in module store", error);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateModuleDetails = async (workspaceSlug: string, projectId: string, moduleId: string, data: Partial<IModule>) => {
+    try {
+      runInAction(() => {
+        (this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].map((module) =>
+            module.id === moduleId ? { ...module, ...data } : module
+          ),
+        }),
+          (this.moduleDetails = {
+            ...this.moduleDetails,
+            [moduleId]: {
+              ...this.moduleDetails[moduleId],
+              ...data,
+            },
+          });
+      });
+
+      await this.moduleService.patchModule(workspaceSlug, projectId, moduleId, data, this.rootStore.user.currentUser);
+    } catch (error) {
+      console.error("Failed to update module in module store", error);
+
+      this.fetchModules(workspaceSlug, projectId);
+      this.fetchModuleDetails(workspaceSlug, projectId, moduleId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+    }
+  };
+
+  deleteModule = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].filter((module) => module.id !== moduleId),
+        };
+      });
+
+      await this.moduleService.deleteModule(workspaceSlug, projectId, moduleId, this.rootStore.user.currentUser);
+    } catch (error) {
+      console.error("Failed to delete module in module store", error);
+
+      this.fetchModules(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+    }
+  };
+
+  addModuleToFavorites = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].map((module) => ({
+            ...module,
+            is_favorite: module.id === moduleId ? true : module.is_favorite,
+          })),
+        };
+      });
+
+      await this.moduleService.addModuleToFavorites(workspaceSlug, projectId, {
+        module: moduleId,
+      });
+    } catch (error) {
+      console.error("Failed to add module to favorites in module store", error);
+
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].map((module) => ({
+            ...module,
+            is_favorite: module.id === moduleId ? false : module.is_favorite,
+          })),
+        };
+        this.error = error;
+      });
+    }
+  };
+
+  removeModuleFromFavorites = async (workspaceSlug: string, projectId: string, moduleId: string) => {
+    try {
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].map((module) => ({
+            ...module,
+            is_favorite: module.id === moduleId ? false : module.is_favorite,
+          })),
+        };
+      });
+
+      await this.moduleService.removeModuleFromFavorites(workspaceSlug, projectId, moduleId);
+    } catch (error) {
+      console.error("Failed to remove module from favorites in module store", error);
+
+      runInAction(() => {
+        this.modules = {
+          ...this.modules,
+          [projectId]: this.modules[projectId].map((module) => ({
+            ...module,
+            is_favorite: module.id === moduleId ? true : module.is_favorite,
+          })),
+        };
+      });
+    }
+  };
+}
diff --git a/web/store/page.store.ts b/web/store/page.store.ts
new file mode 100644
index 000000000..23a8050ae
--- /dev/null
+++ b/web/store/page.store.ts
@@ -0,0 +1,99 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "./root";
+import { IPage } from "types";
+// services
+import { ProjectService } from "services/project";
+import { PageService } from "services/page.service";
+
+export interface IPageStore {
+  loader: boolean;
+  error: any | null;
+
+  pageId: string | null;
+  pages: {
+    [project_id: string]: IPage[];
+  };
+  page_details: {
+    [page_id: string]: IPage;
+  };
+
+  //computed
+  projectPages: IPage[];
+  // actions
+  setPageId: (pageId: string) => void;
+  fetchPages: (workspaceSlug: string, projectSlug: string) => void;
+}
+
+class PageStore implements IPageStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  pageId: string | null = null;
+  pages: {
+    [project_id: string]: IPage[];
+  } = {};
+  page_details: {
+    [page_id: string]: IPage;
+  } = {};
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  pageService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      pageId: observable.ref,
+      pages: observable.ref,
+
+      // computed
+      projectPages: computed,
+      // action
+      setPageId: action,
+      fetchPages: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.pageService = new PageService();
+  }
+
+  get projectPages() {
+    if (!this.rootStore.project.projectId) return [];
+    return this.pages?.[this.rootStore.project.projectId] || [];
+  }
+
+  setPageId = (pageId: string) => {
+    this.pageId = pageId;
+  };
+
+  fetchPages = async (workspaceSlug: string, projectSlug: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const pagesResponse = await this.pageService.getPagesWithParams(workspaceSlug, projectSlug, "all");
+
+      runInAction(() => {
+        this.pages = {
+          ...this.pages,
+          [projectSlug]: pagesResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error("Failed to fetch project pages in project store", error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+}
+
+export default PageStore;
diff --git a/web/store/project-view/index.ts b/web/store/project-view/index.ts
new file mode 100644
index 000000000..8fd611bab
--- /dev/null
+++ b/web/store/project-view/index.ts
@@ -0,0 +1,3 @@
+export * from "./project_view_filters.store";
+export * from "./project_view_issues.store";
+export * from "./project_views.store";
diff --git a/web/store/project-view/project_view_filters.store.ts b/web/store/project-view/project_view_filters.store.ts
new file mode 100644
index 000000000..94d355724
--- /dev/null
+++ b/web/store/project-view/project_view_filters.store.ts
@@ -0,0 +1,68 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IIssueFilterOptions } from "types";
+
+export interface IProjectViewFiltersStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  storedFilters: {
+    [viewId: string]: IIssueFilterOptions;
+  };
+
+  // actions
+  updateStoredFilters: (viewId: string, filters: Partial<IIssueFilterOptions>) => void;
+  deleteStoredFilters: (viewId: string) => void;
+}
+
+export class ProjectViewFiltersStore implements IProjectViewFiltersStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  storedFilters: {
+    [viewId: string]: IIssueFilterOptions;
+  } = {};
+
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      storedFilters: observable.ref,
+
+      // actions
+      updateStoredFilters: action,
+      deleteStoredFilters: action,
+    });
+
+    this.rootStore = _rootStore;
+  }
+
+  updateStoredFilters = (viewId: string, filters: Partial<IIssueFilterOptions>) => {
+    runInAction(() => {
+      this.storedFilters = {
+        ...this.storedFilters,
+        [viewId]: { ...this.storedFilters[viewId], ...filters },
+      };
+    });
+  };
+
+  deleteStoredFilters = (viewId: string) => {
+    const updatedStoredFilters = { ...this.storedFilters };
+    delete updatedStoredFilters[viewId];
+
+    runInAction(() => {
+      this.storedFilters = updatedStoredFilters;
+    });
+  };
+}
diff --git a/web/store/project-view/project_view_issues.store.ts b/web/store/project-view/project_view_issues.store.ts
new file mode 100644
index 000000000..6621908e6
--- /dev/null
+++ b/web/store/project-view/project_view_issues.store.ts
@@ -0,0 +1,161 @@
+import { observable, action, makeObservable, runInAction, computed } from "mobx";
+// services
+import { IssueService } from "services/issue";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import { IIssueFilterOptions } from "types";
+import {
+  IIssueGroupWithSubGroupsStructure,
+  IIssueGroupedStructure,
+  IIssueUnGroupedStructure,
+} from "../module/module_issue.store";
+
+export interface IProjectViewIssuesStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  viewIssues: {
+    [viewId: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  };
+
+  // actions
+  fetchViewIssues: (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    filters: IIssueFilterOptions
+  ) => Promise<any>;
+
+  // computed
+  getIssues: IIssueGroupedStructure | IIssueGroupWithSubGroupsStructure | IIssueUnGroupedStructure | null;
+}
+
+export class ProjectViewIssuesStore implements IProjectViewIssuesStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  viewIssues: {
+    [viewId: string]: {
+      grouped: IIssueGroupedStructure;
+      groupWithSubGroups: IIssueGroupWithSubGroupsStructure;
+      ungrouped: IIssueUnGroupedStructure;
+    };
+  } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  issueService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      viewIssues: observable.ref,
+
+      // actions
+      fetchViewIssues: action,
+
+      // computed
+      getIssues: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.issueService = new IssueService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get getIssues() {
+    const viewId: string | null = this.rootStore.projectViews.viewId;
+    const issueType = this.rootStore.issue.getIssueType;
+
+    if (!viewId || !issueType) return null;
+
+    return this.viewIssues?.[viewId]?.[issueType] || null;
+  }
+
+  fetchViewIssues = async (workspaceSlug: string, projectId: string, viewId: string, filters: IIssueFilterOptions) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const displayFilters = this.rootStore.issueFilter.userDisplayFilters;
+
+      let filteredRouteParams: any = {
+        priority: filters?.priority || undefined,
+        state_group: filters?.state_group || undefined,
+        state: filters?.state || undefined,
+        assignees: filters?.assignees || undefined,
+        created_by: filters?.created_by || undefined,
+        labels: filters?.labels || undefined,
+        start_date: filters?.start_date || undefined,
+        target_date: filters?.target_date || undefined,
+        group_by: displayFilters?.group_by || undefined,
+        order_by: displayFilters?.order_by || "-created_at",
+        type: displayFilters?.type || undefined,
+        sub_issue: displayFilters.sub_issue || undefined,
+        sub_group_by: displayFilters.sub_group_by || undefined,
+      };
+
+      const filteredParams = handleIssueQueryParamsByLayout(displayFilters.layout ?? "list", "issues");
+      if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+      if (displayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+      if (displayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+      const response = await this.issueService.getIssuesWithParams(workspaceSlug, projectId, filteredRouteParams);
+
+      const issueType = this.rootStore.issue.getIssueType;
+
+      if (issueType != null) {
+        const newIssues = {
+          ...this.viewIssues,
+          [viewId]: {
+            ...this.viewIssues[viewId],
+            [issueType]: response,
+          },
+        };
+
+        runInAction(() => {
+          this.loader = false;
+          this.viewIssues = newIssues;
+        });
+      }
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+}
diff --git a/web/store/project-view/project_views.store.ts b/web/store/project-view/project_views.store.ts
new file mode 100644
index 000000000..4c4baf487
--- /dev/null
+++ b/web/store/project-view/project_views.store.ts
@@ -0,0 +1,293 @@
+import { observable, action, makeObservable, runInAction } from "mobx";
+// services
+import { ViewService } from "services/view.service";
+// types
+import { RootStore } from "../root";
+import { IProjectView } from "types";
+
+export interface IProjectViewsStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  viewId: string | null;
+  viewsList: {
+    [projectId: string]: IProjectView[];
+  };
+  viewDetails: {
+    [viewId: string]: IProjectView;
+  };
+
+  // actions
+  setViewId: (viewId: string) => void;
+
+  fetchAllViews: (workspaceSlug: string, projectId: string) => Promise<IProjectView[]>;
+  fetchViewDetails: (workspaceSlug: string, projectId: string, viewId: string) => Promise<IProjectView>;
+  createView: (workspaceSlug: string, projectId: string, data: Partial<IProjectView>) => Promise<IProjectView>;
+  updateView: (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: Partial<IProjectView>
+  ) => Promise<IProjectView>;
+  deleteView: (workspaceSlug: string, projectId: string, viewId: string) => Promise<any>;
+  addViewToFavorites: (workspaceSlug: string, projectId: string, viewId: string) => Promise<any>;
+  removeViewFromFavorites: (workspaceSlug: string, projectId: string, viewId: string) => Promise<any>;
+}
+
+export class ProjectViewsStore implements IProjectViewsStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  viewId: string | null = null;
+  viewsList: {
+    [projectId: string]: IProjectView[];
+  } = {};
+  viewDetails: { [viewId: string]: IProjectView } = {};
+
+  // root store
+  rootStore;
+
+  // services
+  viewService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      viewId: observable.ref,
+      viewsList: observable.ref,
+      viewDetails: observable.ref,
+
+      // actions
+      setViewId: action,
+
+      fetchAllViews: action,
+      fetchViewDetails: action,
+      createView: action,
+      updateView: action,
+      deleteView: action,
+      addViewToFavorites: action,
+      removeViewFromFavorites: action,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.viewService = new ViewService();
+  }
+
+  setViewId = (viewId: string) => {
+    this.viewId = viewId;
+  };
+
+  fetchAllViews = async (workspaceSlug: string, projectId: string): Promise<IProjectView[]> => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const response = await this.viewService.getViews(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  fetchViewDetails = async (workspaceSlug: string, projectId: string, viewId: string): Promise<IProjectView> => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+      });
+
+      const response = await this.viewService.getViewDetails(workspaceSlug, projectId, viewId);
+
+      runInAction(() => {
+        this.loader = false;
+        this.viewDetails = {
+          ...this.viewDetails,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  createView = async (workspaceSlug: string, projectId: string, data: Partial<IProjectView>): Promise<IProjectView> => {
+    try {
+      const response = await this.viewService.createView(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser
+      );
+
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: [...(this.viewsList[projectId] ?? []), response],
+        };
+        this.viewDetails = {
+          ...this.viewDetails,
+          [response.id]: response,
+        };
+      });
+
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateView = async (
+    workspaceSlug: string,
+    projectId: string,
+    viewId: string,
+    data: Partial<IProjectView>
+  ): Promise<IProjectView> => {
+    const viewToUpdate = { ...this.viewDetails[viewId], ...data };
+
+    try {
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId]?.map((view) => (view.id === viewId ? viewToUpdate : view)),
+        };
+
+        this.viewDetails = {
+          ...this.viewDetails,
+          [viewId]: viewToUpdate,
+        };
+      });
+
+      const response = await this.viewService.patchView(
+        workspaceSlug,
+        projectId,
+        viewId,
+        data,
+        this.rootStore.user.currentUser
+      );
+
+      return response;
+    } catch (error) {
+      this.fetchViewDetails(workspaceSlug, projectId, viewId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  deleteView = async (workspaceSlug: string, projectId: string, viewId: string): Promise<any> => {
+    try {
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId]?.filter((view) => view.id !== viewId),
+        };
+      });
+
+      await this.viewService.deleteView(workspaceSlug, projectId, viewId, this.rootStore.user.currentUser);
+    } catch (error) {
+      this.fetchAllViews(workspaceSlug, projectId);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  addViewToFavorites = async (workspaceSlug: string, projectId: string, viewId: string) => {
+    try {
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId].map((view) => ({
+            ...view,
+            is_favorite: view.id === viewId ? true : view.is_favorite,
+          })),
+        };
+      });
+
+      await this.viewService.addViewToFavorites(workspaceSlug, projectId, {
+        view: viewId,
+      });
+    } catch (error) {
+      console.error("Failed to add view to favorites in view store", error);
+
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId].map((view) => ({
+            ...view,
+            is_favorite: view.id === viewId ? false : view.is_favorite,
+          })),
+        };
+        this.error = error;
+      });
+    }
+  };
+
+  removeViewFromFavorites = async (workspaceSlug: string, projectId: string, viewId: string) => {
+    try {
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId].map((view) => ({
+            ...view,
+            is_favorite: view.id === viewId ? false : view.is_favorite,
+          })),
+        };
+      });
+
+      await this.viewService.removeViewFromFavorites(workspaceSlug, projectId, viewId);
+    } catch (error) {
+      console.error("Failed to remove view from favorites in view store", error);
+
+      runInAction(() => {
+        this.viewsList = {
+          ...this.viewsList,
+          [projectId]: this.viewsList[projectId].map((view) => ({
+            ...view,
+            is_favorite: view.id === viewId ? true : view.is_favorite,
+          })),
+        };
+      });
+    }
+  };
+}
diff --git a/web/store/project.ts b/web/store/project.ts
deleted file mode 100644
index 0fe842dad..000000000
--- a/web/store/project.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
-// types
-import { RootStore } from "./root";
-// services
-import { ProjectServices } from "services/project.service";
-
-export interface IProject {
-  id: string;
-  name: string;
-  workspaceSlug: string;
-}
-
-export interface IProjectStore {
-  loader: boolean;
-  error: any | null;
-
-  projectLeaveModal: boolean;
-  projectLeaveDetails: IProject | any;
-
-  handleProjectLeaveModal: (project: IProject | null) => void;
-
-  leaveProject: (workspace_slug: string, project_slug: string, user: any) => Promise<void>;
-}
-
-class ProjectStore implements IProjectStore {
-  loader: boolean = false;
-  error: any | null = null;
-
-  projectLeaveModal: boolean = false;
-  projectLeaveDetails: IProject | null = null;
-
-  // root store
-  rootStore;
-  // service
-  projectService;
-
-  constructor(_rootStore: RootStore) {
-    makeObservable(this, {
-      // observable
-      loader: observable,
-      error: observable,
-
-      projectLeaveModal: observable,
-      projectLeaveDetails: observable.ref,
-      // action
-      handleProjectLeaveModal: action,
-      leaveProject: action,
-      // computed
-    });
-
-    this.rootStore = _rootStore;
-    this.projectService = new ProjectServices();
-  }
-
-  handleProjectLeaveModal = (project: IProject | null = null) => {
-    if (project && project?.id) {
-      this.projectLeaveModal = !this.projectLeaveModal;
-      this.projectLeaveDetails = project;
-    } else {
-      this.projectLeaveModal = !this.projectLeaveModal;
-      this.projectLeaveDetails = null;
-    }
-  };
-
-  leaveProject = async (workspace_slug: string, project_slug: string, user: any) => {
-    try {
-      this.loader = true;
-      this.error = null;
-
-      const response = await this.projectService.leaveProject(workspace_slug, project_slug, user);
-
-      runInAction(() => {
-        this.loader = false;
-        this.error = null;
-      });
-
-      return response;
-    } catch (error) {
-      this.loader = false;
-      this.error = error;
-      return error;
-    }
-  };
-}
-
-export default ProjectStore;
diff --git a/web/store/project/index.ts b/web/store/project/index.ts
new file mode 100644
index 000000000..38b2dfd08
--- /dev/null
+++ b/web/store/project/index.ts
@@ -0,0 +1,2 @@
+export * from "./project_publish.store";
+export * from "./project.store";
diff --git a/web/store/project/project.store.ts b/web/store/project/project.store.ts
new file mode 100644
index 000000000..23dbf0b52
--- /dev/null
+++ b/web/store/project/project.store.ts
@@ -0,0 +1,568 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// types
+import { RootStore } from "../root";
+import { IProject, IIssueLabels, IProjectMember, IStateResponse, IState, IEstimate } from "types";
+// services
+import { ProjectService, ProjectStateService, ProjectEstimateService } from "services/project";
+import { IssueService, IssueLabelService } from "services/issue";
+
+export interface IProjectStore {
+  loader: boolean;
+  error: any | null;
+
+  searchQuery: string;
+  projectId: string | null;
+  projects: { [workspaceSlug: string]: IProject[] };
+  project_details: {
+    [projectId: string]: IProject; // projectId: project Info
+  };
+  states: {
+    [projectId: string]: IStateResponse; // project_id: states
+  } | null;
+  labels: {
+    [projectId: string]: IIssueLabels[] | null; // project_id: labels
+  } | null;
+  members: {
+    [projectId: string]: IProjectMember[] | null; // project_id: members
+  } | null;
+  estimates: {
+    [projectId: string]: IEstimate[] | null; // project_id: members
+  } | null;
+
+  // computed
+  searchedProjects: IProject[];
+  projectStatesByGroups: IStateResponse | null;
+  projectStates: IState[] | null;
+  projectLabels: IIssueLabels[] | null;
+  projectMembers: IProjectMember[] | null;
+  projectEstimates: IEstimate[] | null;
+
+  joinedProjects: IProject[];
+  favoriteProjects: IProject[];
+
+  // actions
+  setProjectId: (projectId: string) => void;
+  setSearchQuery: (query: string) => void;
+
+  getProjectById: (workspaceSlug: string, projectId: string) => IProject | null;
+  getProjectStateById: (stateId: string) => IState | null;
+  getProjectLabelById: (labelId: string) => IIssueLabels | null;
+  getProjectMemberById: (memberId: string) => IProjectMember | null;
+  getProjectMemberByUserId: (memberId: string) => IProjectMember | null;
+  getProjectEstimateById: (estimateId: string) => IEstimate | null;
+
+  fetchProjects: (workspaceSlug: string) => Promise<void>;
+  fetchProjectDetails: (workspaceSlug: string, projectId: string) => Promise<any>;
+  fetchProjectStates: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectLabels: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectMembers: (workspaceSlug: string, projectId: string) => Promise<void>;
+  fetchProjectEstimates: (workspaceSlug: string, projectId: string) => Promise<void>;
+
+  addProjectToFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
+  removeProjectFromFavorites: (workspaceSlug: string, projectId: string) => Promise<any>;
+
+  orderProjectsWithSortOrder: (sourceIndex: number, destinationIndex: number, projectId: string) => number;
+  updateProjectView: (workspaceSlug: string, projectId: string, viewProps: any) => Promise<any>;
+
+  joinProject: (workspaceSlug: string, projectIds: string[]) => Promise<void>;
+  leaveProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+  createProject: (workspaceSlug: string, data: any) => Promise<any>;
+  updateProject: (workspaceSlug: string, projectId: string, data: any) => Promise<any>;
+  deleteProject: (workspaceSlug: string, projectId: string) => Promise<void>;
+}
+
+export class ProjectStore implements IProjectStore {
+  loader: boolean = false;
+  error: any | null = null;
+
+  searchQuery: string = "";
+  projectId: string | null = null;
+  projects: { [workspaceSlug: string]: IProject[] } = {}; // workspace_id: project[]
+  project_details: {
+    [key: string]: IProject; // project_id: project
+  } = {};
+  states: {
+    [key: string]: IStateResponse; // project_id: states
+  } | null = {};
+  labels: {
+    [key: string]: IIssueLabels[]; // project_id: labels
+  } | null = {};
+  members: {
+    [key: string]: IProjectMember[]; // project_id: members
+  } | null = {};
+  estimates: {
+    [key: string]: IEstimate[]; // project_id: estimates
+  } | null = {};
+
+  // root store
+  rootStore;
+  // service
+  projectService;
+  issueLabelService;
+  issueService;
+  stateService;
+  estimateService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // observable
+      loader: observable,
+      error: observable,
+
+      searchQuery: observable.ref,
+      projectId: observable.ref,
+      projects: observable.ref,
+      project_details: observable.ref,
+      states: observable.ref,
+      labels: observable.ref,
+      members: observable.ref,
+
+      // computed
+      searchedProjects: computed,
+      projectStatesByGroups: computed,
+      projectStates: computed,
+      projectLabels: computed,
+      projectMembers: computed,
+      projectEstimates: computed,
+
+      joinedProjects: computed,
+      favoriteProjects: computed,
+
+      // action
+      setProjectId: action,
+      setSearchQuery: action,
+      fetchProjects: action,
+      fetchProjectDetails: action,
+
+      getProjectById: action,
+      getProjectStateById: action,
+      getProjectLabelById: action,
+      getProjectMemberById: action,
+
+      fetchProjectStates: action,
+      fetchProjectLabels: action,
+      fetchProjectMembers: action,
+      fetchProjectEstimates: action,
+
+      addProjectToFavorites: action,
+      removeProjectFromFavorites: action,
+
+      orderProjectsWithSortOrder: action,
+      updateProjectView: action,
+      createProject: action,
+      updateProject: action,
+      leaveProject: action,
+    });
+
+    this.rootStore = _rootStore;
+    this.projectService = new ProjectService();
+    this.issueService = new IssueService();
+    this.issueLabelService = new IssueLabelService();
+    this.stateService = new ProjectStateService();
+    this.estimateService = new ProjectEstimateService();
+  }
+
+  get searchedProjects() {
+    if (!this.rootStore.workspace.workspaceSlug) return [];
+
+    const projects = this.projects[this.rootStore.workspace.workspaceSlug];
+
+    return this.searchQuery === ""
+      ? projects
+      : projects?.filter(
+          (project) =>
+            project.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
+            project.identifier.toLowerCase().includes(this.searchQuery.toLowerCase())
+        );
+  }
+
+  get joinedProjects() {
+    if (!this.rootStore.workspace.workspaceSlug) return [];
+    return this.projects?.[this.rootStore.workspace.workspaceSlug]?.filter((p) => p.is_member);
+  }
+
+  get favoriteProjects() {
+    if (!this.rootStore.workspace.workspaceSlug) return [];
+    return this.projects?.[this.rootStore.workspace.workspaceSlug]?.filter((p) => p.is_favorite);
+  }
+
+  get projectStatesByGroups() {
+    if (!this.projectId) return null;
+    return this.states?.[this.projectId] || null;
+  }
+
+  get projectStates() {
+    if (!this.projectId) return null;
+    const stateByGroups: IStateResponse | null = this.projectStatesByGroups;
+    if (!stateByGroups) return null;
+    const _states: IState[] = [];
+    Object.keys(stateByGroups).forEach((_stateGroup: string) => {
+      stateByGroups[_stateGroup].map((state) => {
+        _states.push(state);
+      });
+    });
+    return _states.length > 0 ? _states : null;
+  }
+
+  get projectLabels() {
+    if (!this.projectId) return null;
+    return this.labels?.[this.projectId] || null;
+  }
+
+  get projectMembers() {
+    if (!this.projectId) return null;
+    return this.members?.[this.projectId] || null;
+  }
+
+  get projectEstimates() {
+    if (!this.projectId) return null;
+    return this.estimates?.[this.projectId] || null;
+  }
+
+  // actions
+  setProjectId = (projectId: string) => {
+    this.projectId = projectId ?? null;
+  };
+
+  setSearchQuery = (query: string) => {
+    this.searchQuery = query;
+  };
+
+  /**
+   * get Workspace projects using workspace slug
+   * @param workspaceSlug
+   * @returns
+   *
+   */
+  fetchProjects = async (workspaceSlug: string) => {
+    try {
+      const projects = await this.projectService.getProjects(workspaceSlug);
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: projects,
+        };
+      });
+    } catch (error) {
+      console.log("Failed to fetch project from workspace store");
+      throw error;
+    }
+  };
+
+  fetchProjectDetails = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const response = await this.projectService.getProject(workspaceSlug, projectId);
+      runInAction(() => {
+        this.project_details = {
+          ...this.project_details,
+          [projectId]: response,
+        };
+      });
+      return response;
+    } catch (error) {
+      console.log("Error while fetching project details", error);
+      throw error;
+    }
+  };
+
+  getProjectById = (workspaceSlug: string, projectId: string) => {
+    if (!this.projectId) return null;
+    const projects = this.projects?.[workspaceSlug];
+    if (!projects) return null;
+    const projectInfo: IProject | null = projects.find((project) => project.id === projectId) || null;
+    return projectInfo;
+  };
+
+  getProjectStateById = (stateId: string) => {
+    if (!this.projectId) return null;
+    const states = this.projectStates;
+    if (!states) return null;
+    const stateInfo: IState | null = states.find((state) => state.id === stateId) || null;
+    return stateInfo;
+  };
+
+  getProjectLabelById = (labelId: string) => {
+    if (!this.projectId) return null;
+    const labels = this.projectLabels;
+    if (!labels) return null;
+    const labelInfo: IIssueLabels | null = labels.find((label) => label.id === labelId) || null;
+    return labelInfo;
+  };
+
+  getProjectMemberById = (memberId: string) => {
+    if (!this.projectId) return null;
+    const members = this.projectMembers;
+    if (!members) return null;
+    const memberInfo: IProjectMember | null = members.find((member) => member.id === memberId) || null;
+    return memberInfo;
+  };
+
+  getProjectMemberByUserId = (memberId: string) => {
+    if (!this.projectId) return null;
+    const members = this.projectMembers;
+    if (!members) return null;
+    const memberInfo: IProjectMember | null = members.find((member) => member.member.id === memberId) || null;
+    return memberInfo;
+  };
+
+  getProjectEstimateById = (estimateId: string) => {
+    if (!this.projectId) return null;
+    const estimates = this.projectEstimates;
+    if (!estimates) return null;
+    const estimateInfo: IEstimate | null = estimates.find((estimate) => estimate.id === estimateId) || null;
+    return estimateInfo;
+  };
+
+  fetchProjectStates = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const stateResponse = await this.stateService.getStates(workspaceSlug, projectId);
+      const _states = {
+        ...this.states,
+        [projectId]: stateResponse,
+      };
+
+      runInAction(() => {
+        this.states = _states;
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error(error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  fetchProjectLabels = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const labelResponse = await this.issueLabelService.getProjectIssueLabels(workspaceSlug, projectId);
+      const _labels = {
+        ...this.labels,
+        [projectId]: labelResponse,
+      };
+
+      runInAction(() => {
+        this.labels = _labels;
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error(error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  fetchProjectMembers = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const membersResponse = await this.projectService.projectMembers(workspaceSlug, projectId);
+      const _members = {
+        ...this.members,
+        [projectId]: membersResponse,
+      };
+
+      runInAction(() => {
+        this.members = _members;
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error(error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  fetchProjectEstimates = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const estimatesResponse = await this.estimateService.getEstimatesList(workspaceSlug, projectId);
+      const _estimates = {
+        ...this.estimates,
+        [projectId]: estimatesResponse,
+      };
+
+      runInAction(() => {
+        this.estimates = _estimates;
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.error(error);
+      this.loader = false;
+      this.error = error;
+    }
+  };
+
+  addProjectToFavorites = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const response = await this.projectService.addProjectToFavorites(workspaceSlug, projectId);
+      await this.fetchProjects(workspaceSlug);
+      return response;
+    } catch (error) {
+      console.log("Failed to add project to favorite");
+      throw error;
+    }
+  };
+
+  removeProjectFromFavorites = async (workspaceSlug: string, projectId: string) => {
+    try {
+      const response = await this.projectService.removeProjectFromFavorites(workspaceSlug, projectId);
+      await this.fetchProjects(workspaceSlug);
+      return response;
+    } catch (error) {
+      console.log("Failed to add project to favorite");
+      throw error;
+    }
+  };
+
+  orderProjectsWithSortOrder = (sortIndex: number, destinationIndex: number, projectId: string) => {
+    try {
+      const workspaceSlug = this.rootStore.workspace.workspaceSlug;
+      if (!workspaceSlug) return 0;
+
+      const projectsList = this.projects[workspaceSlug] || [];
+      let updatedSortOrder = projectsList[sortIndex].sort_order;
+
+      if (destinationIndex === 0) updatedSortOrder = (projectsList[0].sort_order as number) - 1000;
+      else if (destinationIndex === projectsList.length - 1)
+        updatedSortOrder = (projectsList[projectsList.length - 1].sort_order as number) + 1000;
+      else {
+        const destinationSortingOrder = projectsList[destinationIndex].sort_order as number;
+        const relativeDestinationSortingOrder =
+          sortIndex < destinationIndex
+            ? (projectsList[destinationIndex + 1].sort_order as number)
+            : (projectsList[destinationIndex - 1].sort_order as number);
+
+        updatedSortOrder = (destinationSortingOrder + relativeDestinationSortingOrder) / 2;
+      }
+
+      const updatedProjectsList = projectsList.map((p) =>
+        p.id === projectId ? { ...p, sort_order: updatedSortOrder } : p
+      );
+
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: updatedProjectsList,
+        };
+      });
+
+      return updatedSortOrder;
+    } catch (error) {
+      console.log("failed to update sort order of the projects");
+      return 0;
+    }
+  };
+
+  updateProjectView = async (workspaceSlug: string, projectId: string, viewProps: any) => {
+    try {
+      const response = await this.projectService.setProjectView(workspaceSlug, projectId, viewProps);
+      await this.fetchProjects(workspaceSlug);
+
+      return response;
+    } catch (error) {
+      console.log("Failed to update sort order of the projects");
+      throw error;
+    }
+  };
+
+  joinProject = async (workspaceSlug: string, projectIds: string[]) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const response = await this.projectService.joinProject(workspaceSlug, projectIds);
+      await this.fetchProjects(workspaceSlug);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+
+  leaveProject = async (workspaceSlug: string, projectId: string) => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const response = await this.projectService.leaveProject(workspaceSlug, projectId, this.rootStore.user);
+      await this.fetchProjects(workspaceSlug);
+
+      runInAction(() => {
+        this.loader = false;
+        this.error = null;
+      });
+
+      return response;
+    } catch (error) {
+      this.loader = false;
+      this.error = error;
+      return error;
+    }
+  };
+
+  createProject = async (workspaceSlug: string, data: any) => {
+    try {
+      const response = await this.projectService.createProject(workspaceSlug, data, this.rootStore.user.currentUser);
+      runInAction(() => {
+        this.projects = {
+          ...this.projects,
+          [workspaceSlug]: [...this.projects[workspaceSlug], response],
+        };
+        this.project_details = {
+          ...this.project_details,
+          [response.id]: response,
+        };
+      });
+      return response;
+    } catch (error) {
+      console.log("Failed to create project from project store");
+      throw error;
+    }
+  };
+
+  updateProject = async (workspaceSlug: string, projectId: string, data: any) => {
+    try {
+      const response = await this.projectService.updateProject(
+        workspaceSlug,
+        projectId,
+        data,
+        this.rootStore.user.currentUser
+      );
+      await this.fetchProjectDetails(workspaceSlug, projectId);
+      await this.fetchProjects(workspaceSlug);
+      return response;
+    } catch (error) {
+      console.log("Failed to create project from project store");
+      throw error;
+    }
+  };
+
+  deleteProject = async (workspaceSlug: string, projectId: string) => {
+    try {
+      await this.projectService.deleteProject(workspaceSlug, projectId, this.rootStore.user.currentUser);
+      await this.fetchProjects(workspaceSlug);
+    } catch (error) {
+      console.log("Failed to delete project from project store");
+    }
+  };
+}
diff --git a/web/store/project-publish.tsx b/web/store/project/project_publish.store.ts
similarity index 85%
rename from web/store/project-publish.tsx
rename to web/store/project/project_publish.store.ts
index b8c6f0dbe..4d089e970 100644
--- a/web/store/project-publish.tsx
+++ b/web/store/project/project_publish.store.ts
@@ -1,8 +1,8 @@
-import { observable, action, computed, makeObservable, runInAction } from "mobx";
+import { observable, action, makeObservable, runInAction } from "mobx";
 // types
-import { RootStore } from "./root";
+import { RootStore } from "../root";
 // services
-import ProjectServices from "services/project-publish.service";
+import { ProjectPublishService } from "services/project";
 
 export type TProjectPublishViews = "list" | "gantt" | "kanban" | "calendar" | "spreadsheet";
 
@@ -31,11 +31,7 @@ export interface IProjectPublishStore {
 
   handleProjectModal: (project_id: string | null) => void;
 
-  getProjectSettingsAsync: (
-    workspace_slug: string,
-    project_slug: string,
-    user: any
-  ) => Promise<void>;
+  getProjectSettingsAsync: (workspace_slug: string, project_slug: string, user: any) => Promise<void>;
   publishProject: (
     workspace_slug: string,
     project_slug: string,
@@ -57,7 +53,7 @@ export interface IProjectPublishStore {
   ) => Promise<void>;
 }
 
-class ProjectPublishStore implements IProjectPublishStore {
+export class ProjectPublishStore implements IProjectPublishStore {
   generalLoader: boolean = false;
   fetchSettingsLoader: boolean = false;
   error: any | null = null;
@@ -91,7 +87,7 @@ class ProjectPublishStore implements IProjectPublishStore {
     });
 
     this.rootStore = _rootStore;
-    this.projectPublishService = new ProjectServices();
+    this.projectPublishService = new ProjectPublishService();
   }
 
   handleProjectModal = (project_id: string | null = null) => {
@@ -105,16 +101,12 @@ class ProjectPublishStore implements IProjectPublishStore {
     }
   };
 
-  getProjectSettingsAsync = async (workspace_slug: string, project_slug: string, user: any) => {
+  getProjectSettingsAsync = async (workspace_slug: string, project_slug: string) => {
     try {
       this.fetchSettingsLoader = true;
       this.error = null;
 
-      const response = await this.projectPublishService.getProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        user
-      );
+      const response = await this.projectPublishService.getProjectSettingsAsync(workspace_slug, project_slug);
 
       if (response && response.length > 0) {
         const _projectPublishSettings: IProjectPublishSettings = {
@@ -151,22 +143,12 @@ class ProjectPublishStore implements IProjectPublishStore {
     }
   };
 
-  publishProject = async (
-    workspace_slug: string,
-    project_slug: string,
-    data: IProjectPublishSettings,
-    user: any
-  ) => {
+  publishProject = async (workspace_slug: string, project_slug: string, data: IProjectPublishSettings) => {
     try {
       this.generalLoader = true;
       this.error = null;
 
-      const response = await this.projectPublishService.createProjectSettingsAsync(
-        workspace_slug,
-        project_slug,
-        data,
-        user
-      );
+      const response = await this.projectPublishService.createProjectSettingsAsync(workspace_slug, project_slug, data);
 
       if (response) {
         const _projectPublishSettings: IProjectPublishSettings = {
@@ -198,8 +180,7 @@ class ProjectPublishStore implements IProjectPublishStore {
     workspace_slug: string,
     project_slug: string,
     project_publish_id: string,
-    data: IProjectPublishSettings,
-    user: any
+    data: IProjectPublishSettings
   ) => {
     try {
       this.generalLoader = true;
@@ -209,8 +190,7 @@ class ProjectPublishStore implements IProjectPublishStore {
         workspace_slug,
         project_slug,
         project_publish_id,
-        data,
-        user
+        data
       );
 
       if (response) {
@@ -239,12 +219,7 @@ class ProjectPublishStore implements IProjectPublishStore {
     }
   };
 
-  unPublishProject = async (
-    workspace_slug: string,
-    project_slug: string,
-    project_publish_id: string,
-    user: any
-  ) => {
+  unPublishProject = async (workspace_slug: string, project_slug: string, project_publish_id: string) => {
     try {
       this.generalLoader = true;
       this.error = null;
@@ -252,8 +227,7 @@ class ProjectPublishStore implements IProjectPublishStore {
       const response = await this.projectPublishService.deleteProjectSettingsAsync(
         workspace_slug,
         project_slug,
-        project_publish_id,
-        user
+        project_publish_id
       );
 
       runInAction(() => {
@@ -270,5 +244,3 @@ class ProjectPublishStore implements IProjectPublishStore {
     }
   };
 }
-
-export default ProjectPublishStore;
diff --git a/web/store/root.ts b/web/store/root.ts
index cdb4c8356..fe8747e39 100644
--- a/web/store/root.ts
+++ b/web/store/root.ts
@@ -1,29 +1,131 @@
 // mobx lite
 import { enableStaticRendering } from "mobx-react-lite";
 // store imports
-import UserStore from "./user";
-import ThemeStore from "./theme";
-import ProjectStore, { IProjectStore } from "./project";
-import ProjectPublishStore, { IProjectPublishStore } from "./project-publish";
-import IssuesStore from "./issues";
-import DraftIssuesStore from "./draft-issue";
+import UserStore from "store/user.store";
+import ThemeStore from "store/theme.store";
+import {
+  DraftIssuesStore,
+  IIssueDetailStore,
+  IIssueFilterStore,
+  IIssueKanBanViewStore,
+  IIssueStore,
+  IssueDetailStore,
+  IssueFilterStore,
+  IssueKanBanViewStore,
+  IssueStore,
+} from "store/issue";
+import { IWorkspaceFilterStore, IWorkspaceStore, WorkspaceFilterStore, WorkspaceStore } from "store/workspace";
+import { IProjectPublishStore, IProjectStore, ProjectPublishStore, ProjectStore } from "store/project";
+import {
+  IModuleFilterStore,
+  IModuleIssueKanBanViewStore,
+  IModuleIssueStore,
+  IModuleStore,
+  ModuleFilterStore,
+  ModuleIssueKanBanViewStore,
+  ModuleIssueStore,
+  ModuleStore,
+} from "store/module";
+import {
+  CycleIssueFilterStore,
+  CycleIssueKanBanViewStore,
+  CycleIssueStore,
+  CycleStore,
+  ICycleIssueFilterStore,
+  ICycleIssueKanBanViewStore,
+  ICycleIssueStore,
+  ICycleStore,
+} from "store/cycle";
+import {
+  IProjectViewFiltersStore,
+  IProjectViewIssuesStore,
+  IProjectViewsStore,
+  ProjectViewFiltersStore,
+  ProjectViewIssuesStore,
+  ProjectViewsStore,
+} from "store/project-view";
+import CalendarStore, { ICalendarStore } from "store/calendar.store";
+import {
+  GlobalViewFiltersStore,
+  GlobalViewIssuesStore,
+  GlobalViewsStore,
+  IGlobalViewFiltersStore,
+  IGlobalViewIssuesStore,
+  IGlobalViewsStore,
+} from "store/global-view";
 
 enableStaticRendering(typeof window === "undefined");
 
 export class RootStore {
   user;
   theme;
-  project: IProjectStore;
+
+  workspace: IWorkspaceStore;
+  workspaceFilter: IWorkspaceFilterStore;
+
   projectPublish: IProjectPublishStore;
-  issues: IssuesStore;
+  project: IProjectStore;
+  issue: IIssueStore;
+
+  module: IModuleStore;
+  moduleIssue: IModuleIssueStore;
+  moduleFilter: IModuleFilterStore;
+  moduleIssueKanBanView: IModuleIssueKanBanViewStore;
+
+  cycle: ICycleStore;
+  cycleIssue: ICycleIssueStore;
+  cycleIssueFilter: ICycleIssueFilterStore;
+  cycleIssueKanBanView: ICycleIssueKanBanViewStore;
+
+  projectViews: IProjectViewsStore;
+  projectViewIssues: IProjectViewIssuesStore;
+  projectViewFilters: IProjectViewFiltersStore;
+
+  issueFilter: IIssueFilterStore;
+  issueDetail: IIssueDetailStore;
+  issueKanBanView: IIssueKanBanViewStore;
   draftIssuesStore: DraftIssuesStore;
 
+  calendar: ICalendarStore;
+
+  globalViews: IGlobalViewsStore;
+  globalViewIssues: IGlobalViewIssuesStore;
+  globalViewFilters: IGlobalViewFiltersStore;
+
   constructor() {
     this.user = new UserStore(this);
     this.theme = new ThemeStore(this);
+
+    this.workspace = new WorkspaceStore(this);
+    this.workspaceFilter = new WorkspaceFilterStore(this);
+
     this.project = new ProjectStore(this);
     this.projectPublish = new ProjectPublishStore(this);
-    this.issues = new IssuesStore(this);
+
+    this.module = new ModuleStore(this);
+    this.moduleIssue = new ModuleIssueStore(this);
+    this.moduleFilter = new ModuleFilterStore(this);
+    this.moduleIssueKanBanView = new ModuleIssueKanBanViewStore(this);
+
+    this.cycle = new CycleStore(this);
+    this.cycleIssue = new CycleIssueStore(this);
+    this.cycleIssueFilter = new CycleIssueFilterStore(this);
+    this.cycleIssueKanBanView = new CycleIssueKanBanViewStore(this);
+
+    this.projectViews = new ProjectViewsStore(this);
+    this.projectViewIssues = new ProjectViewIssuesStore(this);
+    this.projectViewFilters = new ProjectViewFiltersStore(this);
+
+    this.issue = new IssueStore(this);
+    this.issueFilter = new IssueFilterStore(this);
+    this.issueDetail = new IssueDetailStore(this);
+    this.issueKanBanView = new IssueKanBanViewStore(this);
     this.draftIssuesStore = new DraftIssuesStore(this);
+
+    this.calendar = new CalendarStore(this);
+
+    this.globalViews = new GlobalViewsStore(this);
+    this.globalViewIssues = new GlobalViewIssuesStore(this);
+    this.globalViewFilters = new GlobalViewFiltersStore(this);
   }
 }
diff --git a/web/store/theme.ts b/web/store/theme.store.ts
similarity index 82%
rename from web/store/theme.ts
rename to web/store/theme.store.ts
index ecd02ec97..66e851863 100644
--- a/web/store/theme.ts
+++ b/web/store/theme.store.ts
@@ -2,8 +2,6 @@
 import { action, observable, makeObservable } from "mobx";
 // helper
 import { applyTheme, unsetCustomCssVariables } from "helpers/theme.helper";
-// interfaces
-import { ICurrentUserSettings } from "types";
 
 class ThemeStore {
   sidebarCollapsed: boolean | null = null;
@@ -14,8 +12,8 @@ class ThemeStore {
   constructor(_rootStore: any | null = null) {
     makeObservable(this, {
       // observable
-      sidebarCollapsed: observable,
-      theme: observable,
+      sidebarCollapsed: observable.ref,
+      theme: observable.ref,
       // action
       setSidebarCollapsed: action,
       setTheme: action,
@@ -28,8 +26,7 @@ class ThemeStore {
 
   setSidebarCollapsed(collapsed: boolean | null = null) {
     if (collapsed === null) {
-      let _sidebarCollapsed: string | boolean | null =
-        localStorage.getItem("app_sidebar_collapsed");
+      let _sidebarCollapsed: string | boolean | null = localStorage.getItem("app_sidebar_collapsed");
       _sidebarCollapsed = _sidebarCollapsed ? (_sidebarCollapsed === "true" ? true : false) : false;
       this.sidebarCollapsed = _sidebarCollapsed;
     } else {
@@ -38,9 +35,9 @@ class ThemeStore {
     }
   }
 
-  setTheme = async (_theme: { theme: ICurrentUserSettings }) => {
+  setTheme = async (_theme: { theme: any }) => {
     try {
-      const currentTheme: string = _theme.theme.theme.toString();
+      const currentTheme: string = _theme?.theme?.theme?.toString();
 
       // updating the local storage theme value
       localStorage.setItem("theme", currentTheme);
diff --git a/web/store/user.store.ts b/web/store/user.store.ts
new file mode 100644
index 000000000..e37696159
--- /dev/null
+++ b/web/store/user.store.ts
@@ -0,0 +1,229 @@
+// mobx
+import { action, observable, runInAction, makeObservable } from "mobx";
+// services
+import { UserService } from "services/user.service";
+import { WorkspaceService } from "services/workspace.service";
+// interfaces
+import { IUser, IUserSettings } from "types/users";
+
+interface IUserStore {
+  loader: boolean;
+  currentUser: IUser | null;
+  currentUserSettings: IUserSettings | null;
+  dashboardInfo: any;
+  memberInfo: any;
+  hasPermissionToWorkspace: boolean | null;
+  fetchCurrentUser: () => Promise<IUser>;
+  fetchCurrentUserSettings: () => Promise<IUserSettings>;
+  updateTourCompleted: () => Promise<void>;
+}
+
+class UserStore implements IUserStore {
+  loader: boolean = false;
+  currentUser: IUser | null = null;
+  currentUserSettings: IUserSettings | null = null;
+  dashboardInfo: any = null;
+  memberInfo: any = null;
+  hasPermissionToWorkspace: boolean | null = null;
+  // root store
+  rootStore;
+  // services
+  userService;
+  workspaceService;
+
+  constructor(_rootStore: any) {
+    makeObservable(this, {
+      // observable
+      loader: observable.ref,
+      currentUser: observable.ref,
+      currentUserSettings: observable.ref,
+      dashboardInfo: observable.ref,
+      memberInfo: observable.ref,
+      hasPermissionToWorkspace: observable.ref,
+      // action
+      fetchCurrentUser: action,
+      fetchCurrentUserSettings: action,
+      // computed
+    });
+    this.rootStore = _rootStore;
+    this.userService = new UserService();
+    this.workspaceService = new WorkspaceService();
+  }
+
+  fetchCurrentUser = async () => {
+    try {
+      const response = await this.userService.currentUser();
+      if (response) {
+        runInAction(() => {
+          this.currentUser = response;
+        });
+      }
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  fetchCurrentUserSettings = async () => {
+    try {
+      const response = await this.userService.currentUserSettings();
+      if (response) {
+        runInAction(() => {
+          this.currentUserSettings = response;
+        });
+      }
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  fetchUserDashboardInfo = async (workspaceSlug: string, month: number) => {
+    try {
+      const response = await this.userService.userWorkspaceDashboard(workspaceSlug, month);
+      runInAction(() => {
+        this.dashboardInfo = response;
+      });
+      return response;
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  fetchUserWorkspaceInfo = async (workspaceSlug: string) => {
+    try {
+      const response = await this.workspaceService.workspaceMemberMe(workspaceSlug.toString());
+      runInAction(() => {
+        this.memberInfo = response;
+        this.hasPermissionToWorkspace = true;
+      });
+      return response;
+    } catch (error) {
+      runInAction(() => {
+        this.hasPermissionToWorkspace = false;
+      });
+      throw error;
+    }
+  };
+
+  updateTourCompleted = async () => {
+    try {
+      if (this.currentUser) {
+        runInAction(() => {
+          this.currentUser = {
+            ...this.currentUser,
+            is_tour_completed: true,
+          } as IUser;
+        });
+        const response = await this.userService.updateUserTourCompleted(this.currentUser);
+        return response;
+      }
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  // setCurrentUser = async () => {
+  //   try {
+  //     let userResponse: ICurrentUser | null = await UserService.currentUser();
+  //     userResponse = userResponse || null;
+
+  //     if (userResponse) {
+  //       const userPayload: ICurrentUser = {
+  //         id: userResponse?.id,
+  //         avatar: userResponse?.avatar,
+  //         first_name: userResponse?.first_name,
+  //         last_name: userResponse?.last_name,
+  //         username: userResponse?.username,
+  //         email: userResponse?.email,
+  //         mobile_number: userResponse?.mobile_number,
+  //         is_email_verified: userResponse?.is_email_verified,
+  //         is_tour_completed: userResponse?.is_tour_completed,
+  //         onboarding_step: userResponse?.onboarding_step,
+  //         is_onboarded: userResponse?.is_onboarded,
+  //         role: userResponse?.role,
+  //       };
+  //       runInAction(() => {
+  //         this.currentUser = userPayload;
+  //       });
+  //     }
+  //   } catch (error) {
+  //     console.error("Fetching current user error", error);
+  //   }
+  // };
+
+  // setCurrentUserSettings = async () => {
+  //   try {
+  //     let userSettingsResponse: ICurrentUserSettings | null = await UserService.currentUser();
+  //     userSettingsResponse = userSettingsResponse || null;
+
+  //     if (userSettingsResponse) {
+  //       const themePayload = {
+  //         theme: { ...userSettingsResponse?.theme },
+  //       };
+  //       runInAction(() => {
+  //         this.currentUserSettings = themePayload;
+  //         this.rootStore.theme.setTheme(themePayload);
+  //       });
+  //     }
+  //   } catch (error) {
+  //     console.error("Fetching current user error", error);
+  //   }
+  // };
+
+  // updateCurrentUser = async (user: ICurrentUser) => {
+  //   try {
+  //     let userResponse: ICurrentUser = await UserService.updateUser(user);
+  //     userResponse = userResponse || null;
+
+  //     if (userResponse) {
+  //       const userPayload: ICurrentUser = {
+  //         id: userResponse?.id,
+  //         avatar: userResponse?.avatar,
+  //         first_name: userResponse?.first_name,
+  //         last_name: userResponse?.last_name,
+  //         username: userResponse?.username,
+  //         email: userResponse?.email,
+  //         mobile_number: userResponse?.mobile_number,
+  //         is_email_verified: userResponse?.is_email_verified,
+  //         is_tour_completed: userResponse?.is_tour_completed,
+  //         onboarding_step: userResponse?.onboarding_step,
+  //         is_onboarded: userResponse?.is_onboarded,
+  //         role: userResponse?.role,
+  //       };
+  //       runInAction(() => {
+  //         this.currentUser = userPayload;
+  //       });
+  //       return userPayload;
+  //     }
+  //   } catch (error) {
+  //     console.error("Updating user error", error);
+  //     return error;
+  //   }
+  // };
+
+  // updateCurrentUserSettings = async (userTheme: ICurrentUserSettings) => {
+  //   try {
+  //     let userSettingsResponse: ICurrentUserSettings = await UserService.updateUser(userTheme);
+  //     userSettingsResponse = userSettingsResponse || null;
+  //     if (userSettingsResponse) {
+  //       const themePayload = {
+  //         theme: { ...userSettingsResponse?.theme },
+  //       };
+  //       runInAction(() => {
+  //         this.currentUserSettings = themePayload;
+  //         this.rootStore.theme.setTheme(themePayload);
+  //       });
+  //       return themePayload;
+  //     }
+  //   } catch (error) {
+  //     console.error("Updating user settings error", error);
+  //     return error;
+  //   }
+  // };
+
+  // init load
+  initialLoad() {}
+}
+
+export default UserStore;
diff --git a/web/store/user.ts b/web/store/user.ts
deleted file mode 100644
index 28dd3b8d2..000000000
--- a/web/store/user.ts
+++ /dev/null
@@ -1,133 +0,0 @@
-// mobx
-import { action, observable, computed, runInAction, makeObservable } from "mobx";
-// services
-import UserService from "services/user.service";
-// interfaces
-import { ICurrentUser, ICurrentUserSettings } from "types/users";
-
-class UserStore {
-  currentUser: ICurrentUser | null = null;
-  currentUserSettings: ICurrentUserSettings | null = null;
-  // root store
-  rootStore;
-
-  constructor(_rootStore: any) {
-    makeObservable(this, {
-      // observable
-      currentUser: observable.ref,
-      currentUserSettings: observable.ref,
-      // action
-      setCurrentUser: action,
-      setCurrentUserSettings: action,
-      updateCurrentUser: action,
-      updateCurrentUserSettings: action,
-      // computed
-    });
-    this.rootStore = _rootStore;
-    this.initialLoad();
-  }
-
-  setCurrentUser = async () => {
-    try {
-      let userResponse: ICurrentUser | null = await UserService.currentUser();
-      userResponse = userResponse || null;
-
-      if (userResponse) {
-        const userPayload: ICurrentUser = {
-          id: userResponse?.id,
-          avatar: userResponse?.avatar,
-          first_name: userResponse?.first_name,
-          last_name: userResponse?.last_name,
-          username: userResponse?.username,
-          email: userResponse?.email,
-          mobile_number: userResponse?.mobile_number,
-          is_email_verified: userResponse?.is_email_verified,
-          is_tour_completed: userResponse?.is_tour_completed,
-          onboarding_step: userResponse?.onboarding_step,
-          is_onboarded: userResponse?.is_onboarded,
-          role: userResponse?.role,
-        };
-        runInAction(() => {
-          this.currentUser = userPayload;
-        });
-      }
-    } catch (error) {
-      console.error("Fetching current user error", error);
-    }
-  };
-
-  setCurrentUserSettings = async () => {
-    try {
-      let userSettingsResponse: ICurrentUserSettings | null = await UserService.currentUser();
-      userSettingsResponse = userSettingsResponse || null;
-
-      if (userSettingsResponse) {
-        const themePayload = {
-          theme: { ...userSettingsResponse?.theme },
-        };
-        runInAction(() => {
-          this.currentUserSettings = themePayload;
-          this.rootStore.theme.setTheme(themePayload);
-        });
-      }
-    } catch (error) {
-      console.error("Fetching current user error", error);
-    }
-  };
-
-  updateCurrentUser = async (user: ICurrentUser) => {
-    try {
-      let userResponse: ICurrentUser = await UserService.updateUser(user);
-      userResponse = userResponse || null;
-
-      if (userResponse) {
-        const userPayload: ICurrentUser = {
-          id: userResponse?.id,
-          avatar: userResponse?.avatar,
-          first_name: userResponse?.first_name,
-          last_name: userResponse?.last_name,
-          username: userResponse?.username,
-          email: userResponse?.email,
-          mobile_number: userResponse?.mobile_number,
-          is_email_verified: userResponse?.is_email_verified,
-          is_tour_completed: userResponse?.is_tour_completed,
-          onboarding_step: userResponse?.onboarding_step,
-          is_onboarded: userResponse?.is_onboarded,
-          role: userResponse?.role,
-        };
-        runInAction(() => {
-          this.currentUser = userPayload;
-        });
-        return userPayload;
-      }
-    } catch (error) {
-      console.error("Updating user error", error);
-      return error;
-    }
-  };
-
-  updateCurrentUserSettings = async (userTheme: ICurrentUserSettings) => {
-    try {
-      let userSettingsResponse: ICurrentUserSettings = await UserService.updateUser(userTheme);
-      userSettingsResponse = userSettingsResponse || null;
-      if (userSettingsResponse) {
-        const themePayload = {
-          theme: { ...userSettingsResponse?.theme },
-        };
-        runInAction(() => {
-          this.currentUserSettings = themePayload;
-          this.rootStore.theme.setTheme(themePayload);
-        });
-        return themePayload;
-      }
-    } catch (error) {
-      console.error("Updating user settings error", error);
-      return error;
-    }
-  };
-
-  // init load
-  initialLoad() {}
-}
-
-export default UserStore;
diff --git a/web/store/workspace/index.ts b/web/store/workspace/index.ts
new file mode 100644
index 000000000..887bd0b0d
--- /dev/null
+++ b/web/store/workspace/index.ts
@@ -0,0 +1,2 @@
+export * from "./workspace_filters.store";
+export * from "./workspace.store";
diff --git a/web/store/workspace/workspace.store.ts b/web/store/workspace/workspace.store.ts
new file mode 100644
index 000000000..a226720ad
--- /dev/null
+++ b/web/store/workspace/workspace.store.ts
@@ -0,0 +1,217 @@
+import { action, computed, observable, makeObservable, runInAction } from "mobx";
+import { RootStore } from "../root";
+// types
+import { IIssueLabels, IProject, IWorkspace, IWorkspaceMember } from "types";
+// services
+import { WorkspaceService } from "services/workspace.service";
+import { ProjectService } from "services/project";
+import { IssueService, IssueLabelService } from "services/issue";
+
+export interface IWorkspaceStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  workspaceSlug: string | null;
+  workspaces: IWorkspace[];
+  labels: { [workspaceSlug: string]: IIssueLabels[] } | {}; // workspaceSlug: labels[]
+  members: { [workspaceSlug: string]: IWorkspaceMember[] } | {}; // workspaceSlug: members[]
+
+  // actions
+  setWorkspaceSlug: (workspaceSlug: string) => void;
+  getWorkspaceBySlug: (workspaceSlug: string) => IWorkspace | null;
+  getWorkspaceLabelById: (workspaceSlug: string, labelId: string) => IIssueLabels | null;
+  fetchWorkspaces: () => Promise<void>;
+  fetchWorkspaceLabels: (workspaceSlug: string) => Promise<void>;
+  fetchWorkspaceMembers: (workspaceSlug: string) => Promise<void>;
+
+  // computed
+  currentWorkspace: IWorkspace | null;
+  workspaceLabels: IIssueLabels[] | null;
+  workspaceMembers: IWorkspaceMember[] | null;
+}
+
+export class WorkspaceStore implements IWorkspaceStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  workspaceSlug: string | null = null;
+  workspaces: IWorkspace[] = [];
+  projects: { [workspaceSlug: string]: IProject[] } = {}; // workspace_id: project[]
+  labels: { [workspaceSlug: string]: IIssueLabels[] } = {};
+  members: { [workspaceSlug: string]: IWorkspaceMember[] } = {};
+
+  // services
+  workspaceService;
+  projectService;
+  issueService;
+  issueLabelService;
+  // root store
+  rootStore;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      workspaceSlug: observable.ref,
+      workspaces: observable.ref,
+      labels: observable.ref,
+      members: observable.ref,
+
+      // actions
+      setWorkspaceSlug: action,
+      getWorkspaceBySlug: action,
+      getWorkspaceLabelById: action,
+      fetchWorkspaces: action,
+      fetchWorkspaceLabels: action,
+      fetchWorkspaceMembers: action,
+
+      // computed
+      currentWorkspace: computed,
+      workspaceLabels: computed,
+      workspaceMembers: computed,
+    });
+
+    this.rootStore = _rootStore;
+    this.workspaceService = new WorkspaceService();
+    this.projectService = new ProjectService();
+    this.issueService = new IssueService();
+    this.issueLabelService = new IssueLabelService();
+  }
+
+  /**
+   * computed value of current workspace based on workspace id saved in the store
+   */
+  get currentWorkspace() {
+    if (!this.workspaceSlug) return null;
+
+    return this.workspaces?.find((workspace) => workspace.slug === this.workspaceSlug) || null;
+  }
+
+  /**
+   * computed value of workspace labels using the workspace slug from the store
+   */
+  get workspaceLabels() {
+    if (!this.workspaceSlug) return [];
+    const _labels = this.labels?.[this.workspaceSlug];
+    return _labels && Object.keys(_labels).length > 0 ? _labels : [];
+  }
+
+  /**
+   * computed value of workspace members using the workspace slug from the store
+   */
+  get workspaceMembers() {
+    if (!this.workspaceSlug) return [];
+    const _members = this.members?.[this.workspaceSlug];
+    return _members && Object.keys(_members).length > 0 ? _members : [];
+  }
+
+  /**
+   * set workspace slug in the store
+   * @param workspaceSlug
+   * @returns
+   */
+  setWorkspaceSlug = (workspaceSlug: string) => (this.workspaceSlug = workspaceSlug);
+
+  /**
+   * fetch workspace info from the array of workspaces in the store.
+   * @param workspaceSlug
+   */
+  getWorkspaceBySlug = (workspaceSlug: string) => this.workspaces.find((w) => w.slug == workspaceSlug) || null;
+
+  /**
+   * get workspace label information from the workspace labels
+   * @param labelId
+   * @returns
+   */
+  getWorkspaceLabelById = (workspaceSlug: string, labelId: string) =>
+    this.labels?.[workspaceSlug].find((label) => label.id === labelId) || null;
+
+  /**
+   * fetch user workspaces from API
+   */
+  fetchWorkspaces = async () => {
+    try {
+      this.loader = true;
+      this.error = null;
+
+      const workspaceResponse = await this.workspaceService.userWorkspaces();
+
+      runInAction(() => {
+        this.workspaces = workspaceResponse;
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      console.log("Failed to fetch user workspaces in workspace store", error);
+      this.loader = false;
+      this.error = error;
+      this.workspaces = [];
+    }
+  };
+
+  /**
+   * fetch workspace labels using workspace slug
+   * @param workspaceSlug
+   */
+  fetchWorkspaceLabels = async (workspaceSlug: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const labelsResponse = await this.issueLabelService.getWorkspaceIssueLabels(workspaceSlug);
+
+      runInAction(() => {
+        this.labels = {
+          ...this.labels,
+          [workspaceSlug]: labelsResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+    }
+  };
+
+  /**
+   * fetch workspace members using workspace slug
+   * @param workspaceSlug
+   */
+
+  fetchWorkspaceMembers = async (workspaceSlug: string) => {
+    try {
+      runInAction(() => {
+        this.loader = true;
+        this.error = null;
+      });
+
+      const membersResponse = await this.workspaceService.workspaceMembers(workspaceSlug);
+
+      runInAction(() => {
+        this.members = {
+          ...this.members,
+          [workspaceSlug]: membersResponse,
+        };
+        this.loader = false;
+        this.error = null;
+      });
+    } catch (error) {
+      runInAction(() => {
+        this.loader = false;
+        this.error = error;
+      });
+    }
+  };
+}
diff --git a/web/store/workspace/workspace_filters.store.ts b/web/store/workspace/workspace_filters.store.ts
new file mode 100644
index 000000000..d33a56057
--- /dev/null
+++ b/web/store/workspace/workspace_filters.store.ts
@@ -0,0 +1,193 @@
+import { observable, action, computed, makeObservable, runInAction } from "mobx";
+// services
+import { WorkspaceService } from "services/workspace.service";
+// helpers
+import { handleIssueQueryParamsByLayout } from "helpers/issue.helper";
+// types
+import { RootStore } from "../root";
+import {
+  IIssueDisplayFilterOptions,
+  IIssueDisplayProperties,
+  IIssueFilterOptions,
+  IWorkspaceMember,
+  IWorkspaceViewProps,
+  TIssueParams,
+} from "types";
+
+export interface IWorkspaceFilterStore {
+  // states
+  loader: boolean;
+  error: any | null;
+
+  // observables
+  workspaceFilters: IIssueFilterOptions;
+  workspaceDisplayFilters: IIssueDisplayFilterOptions;
+  workspaceDisplayProperties: IIssueDisplayProperties;
+
+  // actions
+  fetchUserWorkspaceFilters: (workspaceSlug: string) => Promise<IWorkspaceMember>;
+  updateWorkspaceFilters: (workspaceSlug: string, filterToUpdate: Partial<IWorkspaceViewProps>) => Promise<void>;
+
+  // computed
+  appliedFilters: TIssueParams[] | null;
+}
+
+export class WorkspaceFilterStore implements IWorkspaceFilterStore {
+  // states
+  loader: boolean = false;
+  error: any | null = null;
+
+  // observables
+  workspaceFilters: IIssueFilterOptions = {};
+  workspaceDisplayFilters: IIssueDisplayFilterOptions = {};
+  workspaceDisplayProperties: IIssueDisplayProperties = {
+    assignee: true,
+    start_date: true,
+    due_date: true,
+    labels: true,
+    key: true,
+    priority: true,
+    state: true,
+    sub_issue_count: true,
+    link: true,
+    attachment_count: true,
+    estimate: true,
+    created_on: true,
+    updated_on: true,
+  };
+
+  // root store
+  rootStore;
+
+  // services
+  workspaceService;
+
+  constructor(_rootStore: RootStore) {
+    makeObservable(this, {
+      // states
+      loader: observable.ref,
+      error: observable.ref,
+
+      // observables
+      workspaceFilters: observable.ref,
+      workspaceDisplayFilters: observable.ref,
+      workspaceDisplayProperties: observable.ref,
+
+      // actions
+      fetchUserWorkspaceFilters: action,
+      updateWorkspaceFilters: action,
+
+      // computed
+      appliedFilters: computed,
+    });
+
+    this.rootStore = _rootStore;
+
+    this.workspaceService = new WorkspaceService();
+  }
+
+  computedFilter = (filters: any, filteredParams: any) => {
+    const computedFilters: any = {};
+    Object.keys(filters).map((key) => {
+      if (filters[key] != undefined && filteredParams.includes(key))
+        computedFilters[key] =
+          typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
+    });
+
+    return computedFilters;
+  };
+
+  get appliedFilters(): TIssueParams[] | null {
+    if (!this.workspaceFilters || !this.workspaceDisplayFilters) return null;
+
+    let filteredRouteParams: any = {
+      priority: this.workspaceFilters?.priority || undefined,
+      state_group: this.workspaceFilters?.state_group || undefined,
+      state: this.workspaceFilters?.state || undefined,
+      assignees: this.workspaceFilters?.assignees || undefined,
+      created_by: this.workspaceFilters?.created_by || undefined,
+      labels: this.workspaceFilters?.labels || undefined,
+      start_date: this.workspaceFilters?.start_date || undefined,
+      target_date: this.workspaceFilters?.target_date || undefined,
+      group_by: this.workspaceDisplayFilters?.group_by || "state",
+      order_by: this.workspaceDisplayFilters?.order_by || "-created_at",
+      sub_group_by: this.workspaceDisplayFilters?.sub_group_by || undefined,
+      type: this.workspaceDisplayFilters?.type || undefined,
+      sub_issue: this.workspaceDisplayFilters?.sub_issue || true,
+      show_empty_groups: this.workspaceDisplayFilters?.show_empty_groups || true,
+      start_target_date: this.workspaceDisplayFilters?.start_target_date || true,
+    };
+
+    const filteredParams = handleIssueQueryParamsByLayout(this.workspaceDisplayFilters.layout, "issues");
+    if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
+
+    if (this.workspaceDisplayFilters.layout === "calendar") filteredRouteParams.group_by = "target_date";
+    if (this.workspaceDisplayFilters.layout === "gantt_chart") filteredRouteParams.start_target_date = true;
+
+    return filteredRouteParams;
+  }
+
+  fetchUserWorkspaceFilters = async (workspaceSlug: string) => {
+    try {
+      const memberResponse = await this.workspaceService.workspaceMemberMe(workspaceSlug);
+
+      runInAction(() => {
+        this.workspaceFilters = memberResponse?.view_props?.filters;
+        this.workspaceDisplayFilters = memberResponse?.view_props?.display_filters ?? {};
+        this.workspaceDisplayProperties = memberResponse?.view_props?.display_properties;
+      });
+
+      return memberResponse;
+    } catch (error) {
+      runInAction(() => {
+        this.error = error;
+      });
+
+      throw error;
+    }
+  };
+
+  updateWorkspaceFilters = async (workspaceSlug: string, filterToUpdate: Partial<IWorkspaceViewProps>) => {
+    const newViewProps = {
+      display_filters: {
+        ...this.workspaceDisplayFilters,
+        ...filterToUpdate.display_filters,
+      },
+      display_properties: {
+        ...this.workspaceDisplayProperties,
+        ...filterToUpdate.display_properties,
+      },
+      filters: {
+        ...this.workspaceFilters,
+        ...filterToUpdate.filters,
+      },
+    };
+
+    // set sub_group_by to null if group_by is set to null
+    if (newViewProps.display_filters.group_by === null) newViewProps.display_filters.sub_group_by = null;
+
+    // set group_by to state if layout is switched to kanban and group_by is null
+    if (newViewProps.display_filters.layout === "kanban" && newViewProps.display_filters.group_by === null)
+      newViewProps.display_filters.group_by = "state";
+
+    try {
+      runInAction(() => {
+        this.workspaceDisplayFilters = newViewProps.display_filters;
+        this.workspaceDisplayProperties = newViewProps.display_properties;
+        this.workspaceFilters = newViewProps.filters;
+      });
+
+      this.workspaceService.updateWorkspaceView(workspaceSlug, {
+        view_props: newViewProps,
+      });
+    } catch (error) {
+      this.fetchUserWorkspaceFilters(workspaceSlug);
+
+      runInAction(() => {
+        this.error = error;
+      });
+
+      console.log("Failed to update user filters in issue filter store", error);
+    }
+  };
+}
diff --git a/web/styles/globals.css b/web/styles/globals.css
index 14a5dd30f..e30425936 100644
--- a/web/styles/globals.css
+++ b/web/styles/globals.css
@@ -58,8 +58,8 @@
     --color-border-300: 212, 212, 212; /* strong border- 1 */
     --color-border-400: 185, 185, 185; /* strong border- 2 */
 
-    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06),
-      0px 1px 2px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.14);
+    --color-shadow-2xs: 0px 0px 1px 0px rgba(23, 23, 23, 0.06), 0px 1px 2px 0px rgba(23, 23, 23, 0.06),
+      0px 1px 2px 0px rgba(23, 23, 23, 0.14);
     --color-shadow-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.16), 0px 2px 4px 0px rgba(16, 24, 40, 0.12),
       0px 1px 8px -1px rgba(16, 24, 40, 0.1);
     --color-shadow-sm: 0px 1px 4px 0px rgba(0, 0, 0, 0.01), 0px 4px 8px 0px rgba(0, 0, 0, 0.02),
@@ -72,8 +72,8 @@
       0px 1px 24px 0px rgba(16, 24, 40, 0.12);
     --color-shadow-xl: 0px 0px 18px 0px rgba(0, 0, 0, 0.16), 0px 0px 24px 0px rgba(16, 24, 40, 0.16),
       0px 0px 52px 0px rgba(16, 24, 40, 0.16);
-    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12),
-      0px 12px 24px 0px rgba(16, 24, 40, 0.12), 0px 1px 32px 0px rgba(16, 24, 40, 0.12);
+    --color-shadow-2xl: 0px 8px 16px 0px rgba(0, 0, 0, 0.12), 0px 12px 24px 0px rgba(16, 24, 40, 0.12),
+      0px 1px 32px 0px rgba(16, 24, 40, 0.12);
     --color-shadow-3xl: 0px 12px 24px 0px rgba(0, 0, 0, 0.12), 0px 16px 32px 0px rgba(0, 0, 0, 0.12),
       0px 1px 48px 0px rgba(16, 24, 40, 0.12);
 
@@ -360,6 +360,11 @@ body {
   overflow: hidden !important;
 }
 
+.vertical-lr {
+  -webkit-writing-mode: vertical-lr;
+  -ms-writing-mode: vertical-lr;
+}
+
 div.web-view-spinner {
   position: relative;
   width: 54px;
@@ -381,92 +386,100 @@ div.web-view-spinner div {
   opacity: 0;
   border-radius: 50px;
   -webkit-border-radius: 50px;
-  box-shadow: 0 0 3px rgba(0,0,0,0.2);
-  -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
   animation: fade 1s linear infinite;
   -webkit-animation: fade 1s linear infinite;
 }
 
 @keyframes fade {
-  from {opacity: 1;}
-  to {opacity: 0.25;}
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.25;
+  }
 }
 @-webkit-keyframes fade {
-  from {opacity: 1;}
-  to {opacity: 0.25;}
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.25;
+  }
 }
 
 div.web-view-spinner div.bar1 {
   transform: rotate(0deg) translate(0, -130%);
-  -webkit-transform:rotate(0deg) translate(0, -130%);
+  -webkit-transform: rotate(0deg) translate(0, -130%);
   animation-delay: 0s;
   -webkit-animation-delay: 0s;
-}    
+}
 
 div.web-view-spinner div.bar2 {
-  transform:rotate(30deg) translate(0, -130%); 
-  -webkit-transform:rotate(30deg) translate(0, -130%); 
+  transform: rotate(30deg) translate(0, -130%);
+  -webkit-transform: rotate(30deg) translate(0, -130%);
   animation-delay: -0.9167s;
   -webkit-animation-delay: -0.9167s;
 }
 
 div.web-view-spinner div.bar3 {
-  transform:rotate(60deg) translate(0, -130%); 
-  -webkit-transform:rotate(60deg) translate(0, -130%); 
+  transform: rotate(60deg) translate(0, -130%);
+  -webkit-transform: rotate(60deg) translate(0, -130%);
   animation-delay: -0.833s;
   -webkit-animation-delay: -0.833s;
 }
 div.web-view-spinner div.bar4 {
-  transform:rotate(90deg) translate(0, -130%); 
-  -webkit-transform:rotate(90deg) translate(0, -130%); 
+  transform: rotate(90deg) translate(0, -130%);
+  -webkit-transform: rotate(90deg) translate(0, -130%);
   animation-delay: -0.7497s;
   -webkit-animation-delay: -0.7497s;
 }
 div.web-view-spinner div.bar5 {
-  transform:rotate(120deg) translate(0, -130%); 
-  -webkit-transform:rotate(120deg) translate(0, -130%); 
+  transform: rotate(120deg) translate(0, -130%);
+  -webkit-transform: rotate(120deg) translate(0, -130%);
   animation-delay: -0.667s;
   -webkit-animation-delay: -0.667s;
 }
 div.web-view-spinner div.bar6 {
-  transform:rotate(150deg) translate(0, -130%); 
-  -webkit-transform:rotate(150deg) translate(0, -130%); 
+  transform: rotate(150deg) translate(0, -130%);
+  -webkit-transform: rotate(150deg) translate(0, -130%);
   animation-delay: -0.5837s;
   -webkit-animation-delay: -0.5837s;
 }
 div.web-view-spinner div.bar7 {
-  transform:rotate(180deg) translate(0, -130%); 
-  -webkit-transform:rotate(180deg) translate(0, -130%); 
+  transform: rotate(180deg) translate(0, -130%);
+  -webkit-transform: rotate(180deg) translate(0, -130%);
   animation-delay: -0.5s;
   -webkit-animation-delay: -0.5s;
 }
 div.web-view-spinner div.bar8 {
-  transform:rotate(210deg) translate(0, -130%); 
-  -webkit-transform:rotate(210deg) translate(0, -130%); 
+  transform: rotate(210deg) translate(0, -130%);
+  -webkit-transform: rotate(210deg) translate(0, -130%);
   animation-delay: -0.4167s;
   -webkit-animation-delay: -0.4167s;
 }
 div.web-view-spinner div.bar9 {
-  transform:rotate(240deg) translate(0, -130%); 
-  -webkit-transform:rotate(240deg) translate(0, -130%); 
+  transform: rotate(240deg) translate(0, -130%);
+  -webkit-transform: rotate(240deg) translate(0, -130%);
   animation-delay: -0.333s;
   -webkit-animation-delay: -0.333s;
 }
 div.web-view-spinner div.bar10 {
-  transform:rotate(270deg) translate(0, -130%); 
-  -webkit-transform:rotate(270deg) translate(0, -130%); 
+  transform: rotate(270deg) translate(0, -130%);
+  -webkit-transform: rotate(270deg) translate(0, -130%);
   animation-delay: -0.2497s;
   -webkit-animation-delay: -0.2497s;
 }
 div.web-view-spinner div.bar11 {
-  transform:rotate(300deg) translate(0, -130%); 
-  -webkit-transform:rotate(300deg) translate(0, -130%); 
+  transform: rotate(300deg) translate(0, -130%);
+  -webkit-transform: rotate(300deg) translate(0, -130%);
   animation-delay: -0.167s;
   -webkit-animation-delay: -0.167s;
 }
 div.web-view-spinner div.bar12 {
-  transform:rotate(330deg) translate(0, -130%); 
-  -webkit-transform:rotate(330deg) translate(0, -130%); 
+  transform: rotate(330deg) translate(0, -130%);
+  -webkit-transform: rotate(330deg) translate(0, -130%);
   animation-delay: -0.0833s;
   -webkit-animation-delay: -0.0833s;
 }
diff --git a/web/types/analytics.d.ts b/web/types/analytics.d.ts
index 651596f19..35da4b723 100644
--- a/web/types/analytics.d.ts
+++ b/web/types/analytics.d.ts
@@ -2,14 +2,11 @@ export interface IAnalyticsResponse {
   total: number;
   distribution: IAnalyticsData;
   extras: {
-    colors: IAnalyticsExtra[];
-    assignee_details: {
-      assignees__id: string | null;
-      assignees__display_name: string | null;
-      assignees__avatar: string | null;
-      assignees__first_name: string;
-      assignees__last_name: string;
-    }[];
+    assignee_details: IAnalyticsAssigneeDetails[];
+    cycle_details: IAnalyticsCycleDetails[];
+    label_details: IAnalyticsLabelDetails[];
+    module_details: IAnalyticsModuleDetails[];
+    state_details: IAnalyticsStateDetails[];
   };
 }
 
@@ -22,19 +19,44 @@ export interface IAnalyticsData {
   }[];
 }
 
-export interface IAnalyticsExtra {
-  name: string;
-  color: string;
+export interface IAnalyticsAssigneeDetails {
+  assignees__avatar: string | null;
+  assignees__display_name: string | null;
+  assignees__first_name: string;
+  assignees__id: string | null;
+  assignees__last_name: string;
+}
+
+export interface IAnalyticsCycleDetails {
+  issue_cycle__cycle__name: string | null;
+  issue_cycle__cycle_id: string | null;
+}
+
+export interface IAnalyticsLabelDetails {
+  labels__color: string | null;
+  labels__id: string | null;
+  labels__name: string | null;
+}
+
+export interface IAnalyticsModuleDetails {
+  issue_module__module__name: string | null;
+  issue_module__module_id: string | null;
+}
+
+export interface IAnalyticsStateDetails {
+  state__color: string;
+  state__name: string;
+  state_id: string;
 }
 
 export type TXAxisValues =
-  | "state__name"
+  | "state_id"
   | "state__group"
-  | "labels__name"
+  | "labels__id"
   | "assignees__id"
   | "estimate_point"
-  | "issue_cycle__cycle__name"
-  | "issue_module__module__name"
+  | "issue_cycle__cycle_id"
+  | "issue_module__module_id"
   | "priority"
   | "start_date"
   | "target_date"
diff --git a/web/types/index.d.ts b/web/types/index.d.ts
index b6811a287..b35090106 100644
--- a/web/types/index.d.ts
+++ b/web/types/index.d.ts
@@ -19,6 +19,7 @@ export * from "./notifications";
 export * from "./waitlist";
 export * from "./reaction";
 export * from "./view-props";
+export * from "./workspace-views";
 
 export type NestedKeyOf<ObjectType extends object> = {
   [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
diff --git a/web/types/issues.d.ts b/web/types/issues.d.ts
index ca49bc7ec..2e242df8c 100644
--- a/web/types/issues.d.ts
+++ b/web/types/issues.d.ts
@@ -2,19 +2,13 @@ import { KeyedMutator } from "swr";
 import type {
   IState,
   IUser,
-  IProject,
   ICycle,
   IModule,
   IUserLite,
   IProjectLite,
   IWorkspaceLite,
   IStateLite,
-  TStateGroups,
   Properties,
-  IIssueFilterOptions,
-  TIssueGroupByOptions,
-  TIssueViewOptions,
-  TIssueOrderByOptions,
   IIssueDisplayFilterOptions,
 } from "types";
 
diff --git a/web/types/projects.d.ts b/web/types/projects.d.ts
index 58ed8daea..e364e9aec 100644
--- a/web/types/projects.d.ts
+++ b/web/types/projects.d.ts
@@ -1,15 +1,4 @@
-import type {
-  IIssueFilterOptions,
-  IUserLite,
-  IWorkspace,
-  IWorkspaceLite,
-  IUserMemberLite,
-  TIssueGroupByOptions,
-  TIssueOrderByOptions,
-  TIssueViewOptions,
-  TStateGroups,
-  IProjectViewProps,
-} from ".";
+import type { IUserLite, IWorkspace, IWorkspaceLite, IUserMemberLite, TStateGroups, IProjectViewProps } from ".";
 
 export interface IProject {
   archive_in: number;
diff --git a/web/types/users.d.ts b/web/types/users.d.ts
index 8440922d1..c80160e3d 100644
--- a/web/types/users.d.ts
+++ b/web/types/users.d.ts
@@ -1,44 +1,44 @@
-import {
-  IIssue,
-  IIssueActivity,
-  IIssueLite,
-  IWorkspace,
-  IWorkspaceLite,
-  NestedKeyOf,
-  Properties,
-  TStateGroups,
-} from ".";
+import { IIssueActivity, IIssueLite, TStateGroups } from ".";
 
 export interface IUser {
+  id: string;
   avatar: string;
   cover_image: string | null;
-  created_at: readonly Date;
-  created_location: readonly string;
-  date_joined: readonly Date;
-  email: string;
+  date_joined: string;
   display_name: string;
+  email: string;
   first_name: string;
-  id: readonly string;
+  last_name: string;
+  is_active: boolean;
+  is_bot: boolean;
   is_email_verified: boolean;
+  is_managed: boolean;
   is_onboarded: boolean;
   is_tour_completed: boolean;
-  last_location: readonly string;
-  last_login: readonly Date;
-  last_name: string;
-  mobile_number: string;
-  my_issues_prop: {
-    properties: Properties;
-    groupBy: NestedKeyOf<IIssue> | null;
-  } | null;
-  onboarding_step: TOnboardingSteps;
-  role: string;
-  token: string;
-  theme: ICustomTheme;
-  updated_at: readonly Date;
-  username: string;
+  mobile_number: string | null;
+  role: string | null;
+  onboarding_step: {
+    workspace_join?: boolean;
+    profile_complete?: boolean;
+    workspace_create?: boolean;
+    workspace_invite?: boolean;
+  };
+  last_workspace_id: string;
   user_timezone: string;
+  username: string;
+  theme: ICustomTheme;
+}
 
-  [...rest: string]: any;
+export interface IUserSettings {
+  id: string;
+  email: string;
+  workspace: {
+    last_workspace_id: string;
+    last_workspace_slug: string;
+    fallback_workspace_id: string;
+    fallback_workspace_slug: string;
+    invites: number;
+  };
 }
 
 export interface ICustomTheme {
@@ -52,18 +52,6 @@ export interface ICustomTheme {
   theme: string;
 }
 
-export interface ICurrentUserResponse extends IUser {
-  assigned_issues: number;
-  last_workspace_id: string | null;
-  workspace_invites: number;
-  workspace: {
-    fallback_workspace_id: string | null;
-    fallback_workspace_slug: string | null;
-    invites: number;
-    last_workspace_id: string | null;
-    last_workspace_slug: string | null;
-  };
-}
 export interface IUserLite {
   avatar: string;
   created_at: Date;
@@ -166,32 +154,32 @@ export interface IUserProfileProjectSegregation {
   };
 }
 
-export interface ICurrentUser {
-  id: readonly string;
-  avatar: string;
-  first_name: string;
-  last_name: string;
-  username: string;
-  email: string;
-  mobile_number: string;
-  is_email_verified: boolean;
-  is_tour_completed: boolean;
-  onboarding_step: TOnboardingSteps;
-  is_onboarded: boolean;
-  role: string;
-}
+// export interface ICurrentUser {
+//   id: readonly string;
+//   avatar: string;
+//   first_name: string;
+//   last_name: string;
+//   username: string;
+//   email: string;
+//   mobile_number: string;
+//   is_email_verified: boolean;
+//   is_tour_completed: boolean;
+//   onboarding_step: TOnboardingSteps;
+//   is_onboarded: boolean;
+//   role: string;
+// }
 
-export interface ICustomTheme {
-  background: string;
-  text: string;
-  primary: string;
-  sidebarBackground: string;
-  sidebarText: string;
-  darkPalette: boolean;
-  palette: string;
-  theme: string;
-}
+// export interface ICustomTheme {
+//   background: string;
+//   text: string;
+//   primary: string;
+//   sidebarBackground: string;
+//   sidebarText: string;
+//   darkPalette: boolean;
+//   palette: string;
+//   theme: string;
+// }
 
-export interface ICurrentUserSettings {
-  theme: ICustomTheme;
-}
+// export interface ICurrentUserSettings {
+//   theme: ICustomTheme;
+// }
diff --git a/web/types/view-props.d.ts b/web/types/view-props.d.ts
index 2b2a5a153..5a98b248c 100644
--- a/web/types/view-props.d.ts
+++ b/web/types/view-props.d.ts
@@ -1,6 +1,4 @@
-import { Properties } from "./workspace";
-
-export type TIssueViewOptions = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
+export type TIssueLayouts = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt_chart";
 
 export type TIssueGroupByOptions =
   | "state"
@@ -33,26 +31,72 @@ export type TIssueOrderByOptions =
   | "start_date"
   | "-start_date";
 
+export type TIssueTypeFilters = "active" | "backlog" | null;
+
+export type TIssueExtraOptions = "show_empty_groups" | "sub_issue";
+
+export type TIssueParams =
+  | "priority"
+  | "state_group"
+  | "state"
+  | "assignees"
+  | "created_by"
+  | "subscriber"
+  | "labels"
+  | "start_date"
+  | "target_date"
+  | "project"
+  | "group_by"
+  | "sub_group_by"
+  | "order_by"
+  | "type"
+  | "sub_issue"
+  | "show_empty_groups"
+  | "start_target_date";
+
+export type TCalendarLayouts = "month" | "week";
+
 export interface IIssueFilterOptions {
   assignees?: string[] | null;
   created_by?: string[] | null;
   labels?: string[] | null;
   priority?: string[] | null;
-  start_date?: TStateGroups[] | null;
+  project?: string[] | null;
+  start_date?: string[] | null;
   state?: string[] | null;
-  state_group?: TStateGroups[] | null;
+  state_group?: string[] | null;
   subscriber?: string[] | null;
   target_date?: string[] | null;
 }
 
 export interface IIssueDisplayFilterOptions {
+  calendar?: {
+    show_weekends?: boolean;
+    layout?: TCalendarLayouts;
+  };
   group_by?: TIssueGroupByOptions;
-  layout?: TIssueViewOptions;
+  sub_group_by?: TIssueGroupByOptions;
+  layout?: TIssueLayouts;
   order_by?: TIssueOrderByOptions;
   show_empty_groups?: boolean;
   start_target_date?: boolean;
   sub_issue?: boolean;
-  type?: "active" | "backlog" | null;
+  type?: TIssueTypeFilters;
+}
+export interface IIssueDisplayProperties {
+  assignee: boolean;
+  start_date: boolean;
+  due_date: boolean;
+  labels: boolean;
+  key: boolean;
+  priority: boolean;
+  state: boolean;
+  sub_issue_count: boolean;
+  link: boolean;
+  attachment_count: boolean;
+  estimate: boolean;
+  created_on: boolean;
+  updated_on: boolean;
 }
 
 export interface IWorkspaceIssueFilterOptions {
diff --git a/web/types/views.d.ts b/web/types/views.d.ts
index e1246af5a..4f55e8c74 100644
--- a/web/types/views.d.ts
+++ b/web/types/views.d.ts
@@ -1,4 +1,6 @@
-export interface IView {
+import { IIssueFilterOptions } from "./view-props";
+
+export interface IProjectView {
   id: string;
   access: string;
   created_at: Date;
@@ -8,19 +10,8 @@ export interface IView {
   updated_by: string;
   name: string;
   description: string;
-  query: IQuery;
-  query_data: IQuery;
+  query: IIssueFilterOptions;
+  query_data: IIssueFilterOptions;
   project: string;
   workspace: string;
 }
-
-export interface IQuery {
-  assignees: string[] | null;
-  created_by: string[] | null;
-  labels: string[] | null;
-  priority: string[] | null;
-  state: string[] | null;
-  start_date: string[] | null;
-  target_date: string[] | null;
-  type: "active" | "backlog" | null;
-}
diff --git a/web/types/workspace-views.d.ts b/web/types/workspace-views.d.ts
index 0796e5cae..754e63711 100644
--- a/web/types/workspace-views.d.ts
+++ b/web/types/workspace-views.d.ts
@@ -1,4 +1,4 @@
-import { IWorkspaceGlobalViewProps } from "./view-props";
+import { IWorkspaceViewProps } from "./view-props";
 
 export interface IWorkspaceView {
   id: string;
@@ -10,8 +10,8 @@ export interface IWorkspaceView {
   updated_by: string;
   name: string;
   description: string;
-  query: IWorkspaceGlobalViewProps;
-  query_data: IWorkspaceGlobalViewProps;
+  query: any;
+  query_data: IWorkspaceViewProps;
   project: string;
   workspace: string;
   workspace_detail?: {
@@ -20,3 +20,5 @@ export interface IWorkspaceView {
     slug: string;
   };
 }
+
+export type TStaticViewTypes = "all-issues" | "assigned" | "created" | "subscribed";
diff --git a/yarn.lock b/yarn.lock
index a39b30639..6a05e0fde 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -926,6 +926,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.22.5":
+  version "7.23.1"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.1.tgz#72741dc4d413338a91dcb044a86f3c0bc402646d"
+  integrity sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.22.5":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -1236,6 +1243,11 @@
   resolved "https://registry.yarnpkg.com/@esbuild/linux-ia32/-/linux-ia32-0.18.20.tgz#699391cccba9aee6019b7f9892eb99219f1570a7"
   integrity sha512-P4etWwq6IsReT0E1KHU40bOnzMHoH73aXp96Fs8TIT6z9Hu8G6+0SHSw9i2isWrD2nbx2qo5yUqACgdfVGx7TA==
 
+"@esbuild/linux-loong64@0.14.54":
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz#de2a4be678bd4d0d1ffbb86e6de779cde5999028"
+  integrity sha512-bZBrLAIX1kpWelV0XemxBZllyRmM6vgFQQG2GdNb+r3Fkp0FOh1NJSvekXDs7jq70k4euu1cryLMfU+mTXlEpw==
+
 "@esbuild/linux-loong64@0.18.20":
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/@esbuild/linux-loong64/-/linux-loong64-0.18.20.tgz#e6fccb7aac178dd2ffb9860465ac89d7f23b977d"
@@ -1390,13 +1402,26 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.4.tgz#19654d1026cc410975d46445180e70a5089b3e7d"
   integrity sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA==
 
-"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.3":
+"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.17", "@headlessui/react@^1.7.3":
   version "1.7.17"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.17.tgz#a0ec23af21b527c030967245fd99776aa7352bc6"
   integrity sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==
   dependencies:
     client-only "^0.0.1"
 
+"@hello-pangea/dnd@^16.3.0":
+  version "16.3.0"
+  resolved "https://registry.yarnpkg.com/@hello-pangea/dnd/-/dnd-16.3.0.tgz#3776212f812df4e8e69c42831ec8ab7ff3a087d6"
+  integrity sha512-RYQ/K8shtJoyNPvFWz0gfXIK7HF3P3mL9UZFGMuHB0ljRSXVgMjVFI/FxcZmakMzw6tO7NflWLriwTNBow/4vw==
+  dependencies:
+    "@babel/runtime" "^7.22.5"
+    css-box-model "^1.2.1"
+    memoize-one "^6.0.0"
+    raf-schd "^4.0.3"
+    react-redux "^8.1.1"
+    redux "^4.2.1"
+    use-memo-one "^1.1.3"
+
 "@heroicons/react@^2.0.12":
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-2.0.18.tgz#f80301907c243df03c7e9fd76c0286e95361f7c1"
@@ -2627,7 +2652,7 @@
   dependencies:
     "@types/unist" "*"
 
-"@types/hoist-non-react-statics@^3.3.0":
+"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#dc1e9ded53375d37603c479cc12c693b0878aa2a"
   integrity sha512-YIQtIg4PKr7ZyqNPZObpxfHsHEmuB8dXCxd6qVcGuQVDK2bpsF7bYNnBJ4Nn7giuACZg+WewExgrtAJ3XnA4Xw==
@@ -2717,6 +2742,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.3.tgz#f0b991c32cfc6a4e7f3399d6cb4b8cf9a0315014"
   integrity sha512-p6ua9zBxz5otCmbpb5D3U4B5Nanw6Pk3PPyX05xnxbB/fRv71N7CPmORg7uAD5P70T0xmx1pzAx/FUfa5X+3cw==
 
+"@types/node@^20.5.2":
+  version "20.8.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.2.tgz#d76fb80d87d0d8abfe334fc6d292e83e5524efc4"
+  integrity sha512-Vvycsc9FQdwhxE3y3DzeIxuEJbWGDsnrxvMADzTDF/lcdR9/K+AQIeAghTQsHtotg/q0j3WEOYS/jQgSdWue3w==
+
 "@types/nprogress@^0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.0.tgz#86c593682d4199212a0509cc3c4d562bbbd6e45f"
@@ -2781,10 +2811,10 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-dom@^18.0.6":
-  version "18.2.7"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.7.tgz#67222a08c0a6ae0a0da33c3532348277c70abb63"
-  integrity sha512-GRaAEriuT4zp9N4p1i8BDBYmEyfo+xQ3yHjJU4eiK5NDa1RmUZG+unZABUTK4/Ox/M+GaHwb6Ow8rUITrtjszA==
+"@types/react-dom@18.2.0":
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.0.tgz#374f28074bb117f56f58c4f3f71753bebb545156"
+  integrity sha512-8yQrvS6sMpSwIovhPOwfyNf2Wz6v/B62LFSVYQ85+Rq3tLsBIG7rP5geMxaijTUxSkrO6RzN/IRuIAADYQsleA==
   dependencies:
     "@types/react" "*"
 
@@ -2805,7 +2835,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.0.15", "@types/react@18.0.28", "@types/react@18.2.0", "@types/react@^18.0.17", "@types/react@^18.2.5":
+"@types/react@*", "@types/react@18.0.15", "@types/react@18.0.28", "@types/react@18.2.0", "@types/react@^18.2.5":
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.0.tgz#15cda145354accfc09a18d2f2305f9fc099ada21"
   integrity sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==
@@ -2858,6 +2888,11 @@
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.8.tgz#bb197b9639aa1a04cf464a617fe800cccd92ad5c"
   integrity sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==
 
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
 "@types/uuid@^8.3.4":
   version "8.3.4"
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
@@ -2868,7 +2903,7 @@
   resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.4.tgz#e884a59338da907bda8d2ed03e01c5c49d036f1c"
   integrity sha512-zAuJWQflfx6dYJM62vna+Sn5aeSWhh3OB+wfUEACNcqUSc0AGc5JKl+ycL1vrH7frGTXhJchYjE1Hak8L819dA==
 
-"@typescript-eslint/eslint-plugin@^5.48.2", "@typescript-eslint/eslint-plugin@^5.51.0":
+"@typescript-eslint/eslint-plugin@^5.48.2":
   version "5.62.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz#aeef0328d172b9e37d9bab6dbc13b87ed88977db"
   integrity sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==
@@ -3377,6 +3412,13 @@ builtin-modules@^3.1.0:
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.3.0.tgz#cae62812b89801e9656336e46223e030386be7b6"
   integrity sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==
 
+bundle-require@^3.0.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bundle-require/-/bundle-require-3.1.2.tgz#1374a7bdcb8b330a7ccc862ccbf7c137cc43ad27"
+  integrity sha512-Of6l6JBAxiyQ5axFxUM6dYeP/W7X2Sozeo/4EYB9sJhL+dqL7TKjg+shwxp6jlu/6ZSERfsYtIpSJ1/x3XkAEA==
+  dependencies:
+    load-tsconfig "^0.2.0"
+
 bundle-require@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/bundle-require/-/bundle-require-4.0.1.tgz#2cc1ad76428043d15e0e7f30990ee3d5404aa2e3"
@@ -3692,7 +3734,7 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
-css-box-model@^1.2.0:
+css-box-model@^1.2.0, css-box-model@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1"
   integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==
@@ -4164,6 +4206,133 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
+esbuild-android-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-android-64/-/esbuild-android-64-0.14.54.tgz#505f41832884313bbaffb27704b8bcaa2d8616be"
+  integrity sha512-Tz2++Aqqz0rJ7kYBfz+iqyE3QMycD4vk7LBRyWaAVFgFtQ/O8EJOnVmTOiDWYZ/uYzB4kvP+bqejYdVKzE5lAQ==
+
+esbuild-android-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.14.54.tgz#8ce69d7caba49646e009968fe5754a21a9871771"
+  integrity sha512-F9E+/QDi9sSkLaClO8SOV6etqPd+5DgJje1F9lOWoNncDdOBL2YF59IhsWATSt0TLZbYCf3pNlTHvVV5VfHdvg==
+
+esbuild-darwin-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.14.54.tgz#24ba67b9a8cb890a3c08d9018f887cc221cdda25"
+  integrity sha512-jtdKWV3nBviOd5v4hOpkVmpxsBy90CGzebpbO9beiqUYVMBtSc0AL9zGftFuBon7PNDcdvNCEuQqw2x0wP9yug==
+
+esbuild-darwin-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.14.54.tgz#3f7cdb78888ee05e488d250a2bdaab1fa671bf73"
+  integrity sha512-OPafJHD2oUPyvJMrsCvDGkRrVCar5aVyHfWGQzY1dWnzErjrDuSETxwA2HSsyg2jORLY8yBfzc1MIpUkXlctmw==
+
+esbuild-freebsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.14.54.tgz#09250f997a56ed4650f3e1979c905ffc40bbe94d"
+  integrity sha512-OKwd4gmwHqOTp4mOGZKe/XUlbDJ4Q9TjX0hMPIDBUWWu/kwhBAudJdBoxnjNf9ocIB6GN6CPowYpR/hRCbSYAg==
+
+esbuild-freebsd-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.14.54.tgz#bafb46ed04fc5f97cbdb016d86947a79579f8e48"
+  integrity sha512-sFwueGr7OvIFiQT6WeG0jRLjkjdqWWSrfbVwZp8iMP+8UHEHRBvlaxL6IuKNDwAozNUmbb8nIMXa7oAOARGs1Q==
+
+esbuild-linux-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.14.54.tgz#e2a8c4a8efdc355405325033fcebeb941f781fe5"
+  integrity sha512-1ZuY+JDI//WmklKlBgJnglpUL1owm2OX+8E1syCD6UAxcMM/XoWd76OHSjl/0MR0LisSAXDqgjT3uJqT67O3qw==
+
+esbuild-linux-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.14.54.tgz#de5fdba1c95666cf72369f52b40b03be71226652"
+  integrity sha512-EgjAgH5HwTbtNsTqQOXWApBaPVdDn7XcK+/PtJwZLT1UmpLoznPd8c5CxqsH2dQK3j05YsB3L17T8vE7cp4cCg==
+
+esbuild-linux-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.14.54.tgz#dae4cd42ae9787468b6a5c158da4c84e83b0ce8b"
+  integrity sha512-WL71L+0Rwv+Gv/HTmxTEmpv0UgmxYa5ftZILVi2QmZBgX3q7+tDeOQNqGtdXSdsL8TQi1vIaVFHUPDe0O0kdig==
+
+esbuild-linux-arm@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.14.54.tgz#a2c1dff6d0f21dbe8fc6998a122675533ddfcd59"
+  integrity sha512-qqz/SjemQhVMTnvcLGoLOdFpCYbz4v4fUo+TfsWG+1aOu70/80RV6bgNpR2JCrppV2moUQkww+6bWxXRL9YMGw==
+
+esbuild-linux-mips64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.14.54.tgz#d9918e9e4cb972f8d6dae8e8655bf9ee131eda34"
+  integrity sha512-qTHGQB8D1etd0u1+sB6p0ikLKRVuCWhYQhAHRPkO+OF3I/iSlTKNNS0Lh2Oc0g0UFGguaFZZiPJdJey3AGpAlw==
+
+esbuild-linux-ppc64le@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.14.54.tgz#3f9a0f6d41073fb1a640680845c7de52995f137e"
+  integrity sha512-j3OMlzHiqwZBDPRCDFKcx595XVfOfOnv68Ax3U4UKZ3MTYQB5Yz3X1mn5GnodEVYzhtZgxEBidLWeIs8FDSfrQ==
+
+esbuild-linux-riscv64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-riscv64/-/esbuild-linux-riscv64-0.14.54.tgz#618853c028178a61837bc799d2013d4695e451c8"
+  integrity sha512-y7Vt7Wl9dkOGZjxQZnDAqqn+XOqFD7IMWiewY5SPlNlzMX39ocPQlOaoxvT4FllA5viyV26/QzHtvTjVNOxHZg==
+
+esbuild-linux-s390x@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-s390x/-/esbuild-linux-s390x-0.14.54.tgz#d1885c4c5a76bbb5a0fe182e2c8c60eb9e29f2a6"
+  integrity sha512-zaHpW9dziAsi7lRcyV4r8dhfG1qBidQWUXweUjnw+lliChJqQr+6XD71K41oEIC3Mx1KStovEmlzm+MkGZHnHA==
+
+esbuild-netbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.14.54.tgz#69ae917a2ff241b7df1dbf22baf04bd330349e81"
+  integrity sha512-PR01lmIMnfJTgeU9VJTDY9ZerDWVFIUzAtJuDHwwceppW7cQWjBBqP48NdeRtoP04/AtO9a7w3viI+PIDr6d+w==
+
+esbuild-openbsd-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.14.54.tgz#db4c8495287a350a6790de22edea247a57c5d47b"
+  integrity sha512-Qyk7ikT2o7Wu76UsvvDS5q0amJvmRzDyVlL0qf5VLsLchjCa1+IAvd8kTBgUxD7VBUUVgItLkk609ZHUc1oCaw==
+
+esbuild-sunos-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz#54287ee3da73d3844b721c21bc80c1dc7e1bf7da"
+  integrity sha512-28GZ24KmMSeKi5ueWzMcco6EBHStL3B6ubM7M51RmPwXQGLe0teBGJocmWhgwccA1GeFXqxzILIxXpHbl9Q/Kw==
+
+esbuild-windows-32@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.14.54.tgz#f8aaf9a5667630b40f0fb3aa37bf01bbd340ce31"
+  integrity sha512-T+rdZW19ql9MjS7pixmZYVObd9G7kcaZo+sETqNH4RCkuuYSuv9AGHUVnPoP9hhuE1WM1ZimHz1CIBHBboLU7w==
+
+esbuild-windows-64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.14.54.tgz#bf54b51bd3e9b0f1886ffdb224a4176031ea0af4"
+  integrity sha512-AoHTRBUuYwXtZhjXZbA1pGfTo8cJo3vZIcWGLiUcTNgHpJJMC1rVA44ZereBHMJtotyN71S8Qw0npiCIkW96cQ==
+
+esbuild-windows-arm64@0.14.54:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.14.54.tgz#937d15675a15e4b0e4fafdbaa3a01a776a2be982"
+  integrity sha512-M0kuUvXhot1zOISQGXwWn6YtS+Y/1RT9WrVIOywZnJHo3jCDyewAc79aKNQWFCQm+xNHVTq9h8dZKvygoXQQRg==
+
+esbuild@^0.14.25:
+  version "0.14.54"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.14.54.tgz#8b44dcf2b0f1a66fc22459943dccf477535e9aa2"
+  integrity sha512-Cy9llcy8DvET5uznocPyqL3BFRrFXSVqbgpMJ9Wz8oVjZlh/zUSNbPRbov0VX7VxN2JH1Oa0uNxZ7eLRb62pJA==
+  optionalDependencies:
+    "@esbuild/linux-loong64" "0.14.54"
+    esbuild-android-64 "0.14.54"
+    esbuild-android-arm64 "0.14.54"
+    esbuild-darwin-64 "0.14.54"
+    esbuild-darwin-arm64 "0.14.54"
+    esbuild-freebsd-64 "0.14.54"
+    esbuild-freebsd-arm64 "0.14.54"
+    esbuild-linux-32 "0.14.54"
+    esbuild-linux-64 "0.14.54"
+    esbuild-linux-arm "0.14.54"
+    esbuild-linux-arm64 "0.14.54"
+    esbuild-linux-mips64le "0.14.54"
+    esbuild-linux-ppc64le "0.14.54"
+    esbuild-linux-riscv64 "0.14.54"
+    esbuild-linux-s390x "0.14.54"
+    esbuild-netbsd-64 "0.14.54"
+    esbuild-openbsd-64 "0.14.54"
+    esbuild-sunos-64 "0.14.54"
+    esbuild-windows-32 "0.14.54"
+    esbuild-windows-64 "0.14.54"
+    esbuild-windows-arm64 "0.14.54"
+
 esbuild@^0.18.2:
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
@@ -5815,7 +5984,7 @@ linkifyjs@^4.1.0:
   resolved "https://registry.yarnpkg.com/linkifyjs/-/linkifyjs-4.1.1.tgz#73d427e3bbaaf4ca8e71c589ad4ffda11a9a5fde"
   integrity sha512-zFN/CTVmbcVef+WaDXT63dNzzkfRBKT1j464NJQkV7iSgJU0sLBus9W0HBwnXK13/hf168pbrx/V/bjEHOXNHA==
 
-load-tsconfig@^0.2.3:
+load-tsconfig@^0.2.0, load-tsconfig@^0.2.3:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/load-tsconfig/-/load-tsconfig-0.2.5.tgz#453b8cd8961bfb912dea77eb6c168fe8cca3d3a1"
   integrity sha512-IXO6OCs9yg8tMKzfPZ1YmheJbZCiEsnBdcB03l0OcfK9prKnJb96siuHCr5Fl37/yo9DnKU+TLpxzTUspw9shg==
@@ -5951,10 +6120,10 @@ lucide-react@^0.263.1:
   resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.263.1.tgz#a456ee0d171aa373929bd3ee20d6f9fb4429c301"
   integrity sha512-keqxAx97PlaEN89PXZ6ki1N8nRjGWtDa4021GFYLNj0RgruM5odbpl8GHTExj0hhPq3sF6Up0gnxt6TSHu+ovw==
 
-lucide-react@^0.269.0:
-  version "0.269.0"
-  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.269.0.tgz#610a4c85dd60b0e1826842ec563eb9bc9b249be5"
-  integrity sha512-+ViEb/2eJJt43/CtxpTfvqu/8gzK49cSUdeuqRuFYiZmX9AvwfumtETM4plhXHymfHb6/mVbHg9uIlc13y+uew==
+lucide-react@^0.274.0:
+  version "0.274.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.274.0.tgz#d3b54dcb972b12f1292061448d61d422ef2e269d"
+  integrity sha512-qiWcojRXEwDiSimMX1+arnxha+ROJzZjJaVvCC0rsG6a9pUPjZePXSq7em4ZKMp0NDm1hyzPNkM7UaWC3LU2AA==
 
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
@@ -6061,6 +6230,11 @@ memoize-one@^5.1.1:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
   integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -6801,6 +6975,14 @@ postcss-js@^4.0.1:
   dependencies:
     camelcase-css "^2.0.1"
 
+postcss-load-config@^3.0.1:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
+  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
+  dependencies:
+    lilconfig "^2.0.5"
+    yaml "^1.10.2"
+
 postcss-load-config@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.1.tgz#152383f481c2758274404e4962743191d73875bd"
@@ -7104,7 +7286,7 @@ queue-tick@^1.0.1:
   resolved "https://registry.yarnpkg.com/queue-tick/-/queue-tick-1.0.1.tgz#f6f07ac82c1fd60f82e098b417a80e52f1f4c142"
   integrity sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==
 
-raf-schd@^4.0.2:
+raf-schd@^4.0.2, raf-schd@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a"
   integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==
@@ -7297,6 +7479,18 @@ react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+react-redux@^8.1.1:
+  version "8.1.2"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188"
+  integrity sha512-xJKYI189VwfsFc4CJvHqHlDrzyFTY/3vZACbE+rr/zQ34Xx1wQfB4OTOSeOSNrF6BDVe8OOdxIrAnMGXA3ggfw==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
 react-remove-scroll-bar@^2.3.3:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
@@ -7379,7 +7573,7 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
-redux@^4.0.0, redux@^4.0.4:
+redux@^4.0.0, redux@^4.0.4, redux@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
   integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
@@ -7548,7 +7742,7 @@ rollup@2.78.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
-rollup@^2.43.1:
+rollup@^2.43.1, rollup@^2.74.1:
   version "2.79.1"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
   integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
@@ -8255,6 +8449,26 @@ tslib@~2.5.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
   integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==
 
+tsup@^5.10.1:
+  version "5.12.9"
+  resolved "https://registry.yarnpkg.com/tsup/-/tsup-5.12.9.tgz#8cdd9b4bc6493317cb92edf5f3476920dddcdb18"
+  integrity sha512-dUpuouWZYe40lLufo64qEhDpIDsWhRbr2expv5dHEMjwqeKJS2aXA/FPqs1dxO4T6mBojo7rvo3jP9NNzaKyDg==
+  dependencies:
+    bundle-require "^3.0.2"
+    cac "^6.7.12"
+    chokidar "^3.5.1"
+    debug "^4.3.1"
+    esbuild "^0.14.25"
+    execa "^5.0.0"
+    globby "^11.0.3"
+    joycon "^3.0.1"
+    postcss-load-config "^3.0.1"
+    resolve-from "^5.0.0"
+    rollup "^2.74.1"
+    source-map "0.8.0-beta.0"
+    sucrase "^3.20.3"
+    tree-kill "^1.2.2"
+
 tsup@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/tsup/-/tsup-7.2.0.tgz#bb24c0d5e436477900c712e42adc67200607303c"
@@ -8319,7 +8533,7 @@ turbo-windows-arm64@1.10.14:
   resolved "https://registry.yarnpkg.com/turbo-windows-arm64/-/turbo-windows-arm64-1.10.14.tgz#cb3a55d30a75aa76258991e929e92f207cac872f"
   integrity sha512-rkBwrTPTxNSOUF7of8eVvvM+BkfkhA2OvpHM94if8tVsU+khrjglilp8MTVPHlyS9byfemPAmFN90oRIPB05BA==
 
-turbo@latest:
+turbo@^1.10.14:
   version "1.10.14"
   resolved "https://registry.yarnpkg.com/turbo/-/turbo-1.10.14.tgz#31f3bb3017218191e0de64728da199678a50aa7d"
   integrity sha512-hr9wDNYcsee+vLkCDIm8qTtwhJ6+UAMJc3nIY6+PNgUTtXcQgHxCq8BGoL7gbABvNWv76CNbK5qL4Lp9G3ZYRA==
@@ -8573,7 +8787,7 @@ use-debounce@^9.0.4:
   resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-9.0.4.tgz#51d25d856fbdfeb537553972ce3943b897f1ac85"
   integrity sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==
 
-use-memo-one@^1.1.1:
+use-memo-one@^1.1.1, use-memo-one@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99"
   integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==
@@ -8586,7 +8800,7 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-use-sync-external-store@1.2.0, use-sync-external-store@^1.2.0:
+use-sync-external-store@1.2.0, use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
@@ -8927,7 +9141,7 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0:
+yaml@^1.10.0, yaml@^1.10.2:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==